首先需要安装webpack-merge实现配置文件合并
npm install --save-dev webpack-merge
- 在webpack.common.js文件中保留公共部分，比如文件的基本处理。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//把打包后的文件直接注入到html模板中
const CleanWebpackPlugin = require('clean-webpack-plugin');//每次运行前清理目录的插件
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}]
},
{
test: /\.(png|svg|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader', // 根据图片大小，把图片优化成base64
options: {
limit: 10000
}
},
{
loader: 'image-webpack-loader',
// options: {
// mozjpeg: {
// progressive: true,
// quality: 65
// },
// optipng: {
// enabled: true,
// },
// pngquant: {
// quality: '65-90',
// speed: 4
// },
// gifsicle: {
// interlaced: true,
// },
// webp: {
// quality: 75
// }
// }
},
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'AICODER 全栈线下实习', // 默认值：Webpack App
filename: 'math.html', // 默认值： 'index.html'
template: path.resolve(__dirname, 'src/index.html'),
minify: {
collapseWhitespace: true,
removeComments: true,//移除html中的注释
removeAttributeQuotes: true // 移除属性的引号
}
}),
new CleanWebpackPlugin(['dist'])
]
};
- 在webpack.dev.js文件中保留开发模式素需的内容。
const path = require('path');
const merge= require('webpack-merge');
const common= require('./webpack.common.js');
let devConfig = {
mode:'development',
output: {
filename: 'main.js',
path: path.resolve(__dirname,'dist')
},
module:{
rules: [
{
test: /\.(sc|c|sa)ss$/,
use: [
{
loader:'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
}, {
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: [
require('autoprefixer')({
browsers: [
// 加这个后可以出现额外的兼容性前缀
"> 0.01%"
]
})
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
]
}
};
module.exports=merge(common,devConfig);
- 在webpack.prod.js文件中保留生产模式的内容。
// 生成最终dist版本，
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//提取css到单独文件的插件
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');//压缩js文件
const HtmlWebpackPlugin = require('html-webpack-plugin');//把打包后的文件直接注入到html模板中
const CleanWebpackPlugin = require('clean-webpack-plugin');//每次运行前清理目录的插件
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
let prodConfig= {
mode: 'production',
output: {
filename: 'main.[hash].js',
path: path.resolve(__dirname,'dist')
},
module: {
rules: [
{ test: /\.(sc|c|sa)ss$/,
use: [MiniCssExtractPlugin.loader,
{loader:'css-loader',
options:{
sourceMap:true
}
},{
loader:'postcss-loader',
options:{
sourceMap:true,
plugins: [
require('autoprefixer')({
browsers: [
// 加这个后可以出现额外的兼容性前缀
"> 0.01%"
]
})
]
}
},
{loader:'sass-loader',
options:{
sourceMap:true
}
}
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name][hash].css",////都提到build目录下的css目录中
chunkFilename: "[id][hash].css"
})
],
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),//压缩js的插件
new OptimizeCSSAssetsPlugin({})//压缩css的插件
]
}
};
module.exports = merge(common,prodConfig);
- 在package.json文件中script属性中更改build和dist。
"build": "npx webpack --config webpack.dev.js",
"dist": "npx webpack --config webpack.prod.js"
注：mode是一定要更改的，记得将要融合的文件作为模块加载进去。
网友评论