开发环境和生产环境的构建目标差异很大。在开发环境中,我们需要强大的、具有实时重新加载或热模块替换能力和本地服务器。而在生产环境中,我们目标则转向于关注更小的包,以及资源的优化,以改善加载时间。所以我们通常建议每个环境编写独立的webpack配置。
现在我们把下面的webpack配置分别写在3个文件上
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry : './js/index.js',
output : {
path : path.resolve(__dirname, 'dist'),
filename : 'js/index.js'
},
devtool : 'source-map',
devServer : {
contentBase : './dist',
host : 'localhost',
port : 8080,
open : true,
},
module:{
rules : [{
test : /\.css$/,
use : ['style-loader',
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath: '../'
}
},
{
loader : 'css-loader',
options : {
sourceMap : true
}
},{
loader : 'postcss-loader',
options : {
plugins : [
require('autoprefixer')({
browsers : [
'ie >=8',
'Firefox >=20',
'Safari >=5',
'Android >=4',
'Ios >=6',
'last 4 version'
]
})
]
}
}]
},{
test : /\.(png|jpg|gif|jpeg)$/,
use : [{
loader : 'file-loader',
options : {
esModule: false,
outputPath : './images'
}
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
quality: [0.65, 0.90],
speed: 4
}
}]
},{
test: /\.(htm|html)$/i,
use:['html-withimg-loader']
}]
},
resolve : {
alias : {
jQuery : path.resolve(__dirname, './js/jquery-3.1.1.min.js')
}
},
plugins:[
new CleanWebpackPlugin(),
new webpack.ProvidePlugin({
$ : "jQuery"
}),
new HtmlWebpackPlugin({
template : './index.html',
filename : 'index.html',
minify : {
minimize : true,
removeAttributeQuotes : true,
removeComments : true,
collapseWhitespace : true,
minifyCSS : true,
minifyJS : true,
removeEmptyElements : false,
},
hash : true
}),
new MiniCssExtractPlugin({
filename : './css/index.css'
}),
new OptimizeCssAssetsWebpackPlugin({
assetNameRegExp : /\.css$/g,
cssProcessor : require('cssnano'),
cssProcessorPluginOptions : {
preset : ['default', {
discardComments : {
removeAll: true
}
}]
},
canPrint :true
})
]
}
步骤
1、安装webpack-merge
cnpm i webpack-merge -S
2、新建一个config文件夹,在这个文件夹上个写3个webpack配置的文件,分别是 :
webpack.common.conf.js //共用的
webpack.dev.conf.js //开发环境使用的
webpack.prod.conf.js //生产环境使用的
3、提取公共的配置到webpack.common.conf.js , 如下 :
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry : './js/index.js',
output : {
path : path.resolve(__dirname, '../dist'),
filename : 'js/index.js'
},
module:{
rules : [{
test : /\.css$/,
use : ['style-loader',
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath: '../'
}
},
'css-loader',
{
loader : 'postcss-loader',
options : {
plugins : [
require('autoprefixer')({
browsers : [
'ie >=8',
'Firefox >=20',
'Safari >=5',
'Android >=4',
'Ios >=6',
'last 4 version'
]
})
]
}
}]
},{
test : /\.(png|jpg|gif|jpeg)$/,
use : [{
loader : 'file-loader',
options : {
esModule: false,
outputPath : './images'
}
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
quality: [0.65, 0.90],
speed: 4
}
}]
},{
test: /\.(htm|html)$/i,
use:['html-withimg-loader']
}]
},
resolve : {
alias : {
jQuery : path.resolve(__dirname, '../js/jquery-3.1.1.min.js')
}
},
plugins:[
new CleanWebpackPlugin(),
new webpack.ProvidePlugin({
$ : "jQuery"
}),
new HtmlWebpackPlugin({
template : './index.html',
filename : 'index.html',
minify : {
minimize : true,
removeAttributeQuotes : true,
removeComments : true,
collapseWhitespace : true,
minifyCSS : true,
minifyJS : true,
removeEmptyElements : false,
},
hash : true
}),
new MiniCssExtractPlugin({
filename : './css/index.css'
})
]
}
4、提取开发环境配置到webpack.dev.conf.js,如下 :
const merge = require('webpack-merge');
const common = require('./webpack.common.conf.js')
module.exports = merge(common, {
devtool : 'cheap-module-eval-source-map',
devServer : {
contentBase : './dist',
host : 'localhost',
port : 8080,
open : true,
}
});
5、提取生产环境配置到webpack.prod.conf.js,如下 :
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const merge = require('webpack-merge');
const common = require('./webpack.common.conf.js')
module.exports = merge(common, {
devtool : 'source-map',
plugins:[
new OptimizeCssAssetsWebpackPlugin({
assetNameRegExp : /\.css$/g,
cssProcessor : require('cssnano'),
cssProcessorPluginOptions : {
preset : ['default', {
discardComments : {
removeAll: true
}
}]
},
canPrint :true
})
]
});
ps :上面的merge是一个函数,第一个参数是公共配置的webpack配置,第二个是json对象。需要注意的是,我们把webpack的配置放在了config文件夹,则里面的一些文件路径需要做出改变,比如上面的
output : {
path : path.resolve(__dirname, '../dist'),
filename : 'js/index.js'
}
现在变成 ../dist
6、在package.json新建打包命令,如下 :
"scripts": {
"build:dev": "webpack --mode development --config ./config/webpack.dev.conf.js",
"build:prod": "webpack --mode development --config ./config/webpack.prod.conf.js",
"start": "webpack-dev-server --mode development --config ./config/webpack.dev.conf.js"
}
build:dev 是开发环境的webpack配置,执行这个命令打包的时候,webpack则会以webpack.dev.conf.js这个文件的配置来打包
build:prod 是生产环境的webpack配置,执行这个命令打包的时候,webpack则会以webpack.prod.conf.js这个文件的配置来打包
例子下载