一. 目标
- 提取公共配置
- 通过npm 命令实现不同环境配置的切换
二. 实现步骤
1. 公共配置
// webpack.config.common
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry: {
index: './src/index.js',
},
// 出口
output: {
path: path.resolve(__dirname, '../dist'),
clean: true
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
inject: 'body'
}),
],
module: {
rules: [
{
test: /\.png/,
type: 'asset/resource',
generator: {
filename: 'static/[hash][ext]' // 表示dist目录下生成资源目录
}
},
{
test: /\.svg/,
type: 'asset/source'
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: 'static/iconfont/[hash][ext]' // 表示dist目录下生成资源目录
}
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
}
2. 开发配置
// webpack.config.dev
const path = require('path')
module.exports = {
// 出口
output: {
filename: 'script/[name].bundle.js',
},
mode: 'development',
devtool: 'cheap-source-map',
devServer: {
static: './dist',
},
module: {
rules: [
{
test: /\.(css|scss)$/,
use: [
'style-loader', // 创建 <style></style> 标签，将 JS 字符串写入，添加到 DOM 中
'css-loader', // 加载css
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'autoprefixer',
{
// 选项
},
],
],
},
},
},
'sass-loader' // 将 Sass 编译成 CSS
]
},
]
}
}
3. 生产配置
// webpack.config.prod
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
// 出口
output: {
publicPath: "./tt",
filename: 'script/[name].[contenthash].bundle.js'
},
mode: 'production',
plugins: [
new MiniCssExtractPlugin({
filename: 'styles/[contenthash].css',
})
],
module: {
rules: [
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader, // link引入
'css-loader', // 加载css
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'autoprefixer',
{
// 选项
},
],
],
},
},
},
'sass-loader' // 将 Sass 编译成 CSS
]
},
]
},
optimization: {
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
// `...`,
new CssMinimizerPlugin(),
new TerserPlugin()
],
},
}
4. 引入
// webpack.config.js
const { merge } = require('webpack-merge');
console.log('merge', merge)
const common = require('./webpack.config.common')
const dev = require('./webpack.config.dev')
const prod = require('./webpack.config.prod')
module.exports = env => { // 环境变量，npm 可以注入
switch(true) {
case env.development:
console.log( merge(common, dev))
return merge(common, dev)
case env.production:
return merge(common, prod)
default:
return new Error('No matching configuration was found!')
}
}
三. npm
"scripts": {
"start": "webpack serve --env development -c ./config/webpack.config.js ",
"build": "webpack --env production -c ./config/webpack.config.js"
},
