标签：const name require 配置 loader webpack 备忘 true
webpack.dev.js
const merge = require('webpack-merge');
const webpack = require("webpack");
const path = require('path');
const common = require('./webpack.common.js');
module.exports = merge(common, {
output: { // 出口文件
path: __dirname + '/dist',
publicPath: '/',
filename: '[name]/[name].js' //输出文件
},
devtool: 'inline-source-map',
watch: true,
devServer: {
contentBase: path.join(__dirname, "./views"),
inline:true,
host: "localhost",
port: "8090",
overlay: true,
open: true,
hot: true,
watchOptions: {
poll: true,
}
},
plugins: [
// new HtmlWebpackInlineSourcePlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
],
});
webpack.prod.js
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
output: { // 出口文件
path: __dirname + '/dist',
publicPath: '/dsp_model/m2/', //线上路径 相对路径或绝对路径
filename: '[name]/[name].js' //输出文件
},
devtool: 'source-map',
plugins: [
new CleanWebpackPlugin(['dist']),
new UglifyJSPlugin({
sourceMap: true
})
]
});
webpack.common.js
/**
* Created by MBJ20180827S1 on 2018/10/19.
*/
const webpack = require("webpack");
const path = require('path');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // html引擎
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
function buildEntriesAndHTML() {
// 用来构建entery
const result = glob.sync('views/**/*.js');
const config = {
hash: false,
inject: true
};
const entries = {};
const htmls = [];
result.forEach(item => {
const one = path.parse(item);
const outputfile = one.dir.split('/').slice(-1)[0];
entries[outputfile] = './' + item;
htmls.push(
new HtmlWebpackPlugin({
...config,
template: './' + one.dir + '/index.html',
filename: './' + outputfile + '/index.html', // 输出html文件的路径
title:outputfile+'通用模版',
chunks: [outputfile]
})
);
});
if (htmls.length > 0) {
htmls.push(new HtmlWebpackInlineSourcePlugin());
}
return {
entries,
htmls
};
}
const final = buildEntriesAndHTML();
module.exports = {
entry: final.entries,
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{loader: 'postcss-loader', options: {plugins: [require("autoprefixer")("last 100 versions")]}}
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader?importLoaders=1',
{loader: 'postcss-loader', options: {plugins: [require("autoprefixer")("last 100 versions")]}},
'less-loader'
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use:[
{
loader: 'url-loader',
options: {
limit: 1024 * 10,
name: 'image/[name].[ext]',
fallback: 'file-loader'
}
},
{
loader: 'image-webpack-loader',// 压缩图片
options: {
bypassOnDebug: true,
}
}
]
// use: [
// {
// loader: 'file-loader',
// options: {
// name: 'image/[name].[ext]',
// }
// },
// {
// loader: 'image-webpack-loader',// 压缩图片
// options: {
// bypassOnDebug: true,
// }
// }
// ]
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|swf|mov)(\?.*)?$/,
use: [
{
loader: 'file-loader',
options: {
name: 'media/[name].[hash:7].[ext]',
}
},
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {minimize: true} // 加载器切换到优化模式，启用压缩。
}
]
}
]
},
plugins: [
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css\.*(?!.*map)/g, //注意不要写成 /\.css$/g
cssProcessor: require('cssnano'),
cssProcessorOptions: {
discardComments: {removeAll: true},
// 避免 cssnano 重新计算 z-index
safe: true,
// cssnano 集成了autoprefixer的功能
// 会使用到autoprefixer进行无关前缀的清理
// 关闭autoprefixer功能
// 使用postcss的autoprefixer功能
autoprefixer: false
},
canPrint: true
}),
new MiniCssExtractPlugin({
filename: '[name]/[name].css',
chunkFilename: '[name].css'
}),
...final.htmls
],
resolve: {
extensions: ['.js', '.json', '.jsx', '.css']
},
}
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production --config webpack.prod.js",
"dev": "webpack-dev-server --open --inline --mode development --config webpack.dev.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.2.1",
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"express": "^4.16.4",
"file-loader": "^2.0.0",
"glob": "^7.1.3",
"html-loader": "^0.5.5",
"html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^4.4.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.4",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"pug": "^2.0.3",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"url-loader": "^1.1.2",
"webpack": "^4.21.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10",
"webpack-merge": "^4.1.4"
}
}
.babelrc
{
"presets": [
["env", {
"modules": false
}],
"stage-2"
],
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}]
]
}
标签：const,name,require,配置,loader,webpack,备忘,true 来源： https://www.cnblogs.com/beileixinqing/p/15693168.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。