我的环境
- win 10
- node v10.13.0
- npm 6.13.4
- webpack 4.43.0
- webpack-cli 3.3.12
- webpack-dev-server 3.11.0
- webpack-merge 5.0.7
引言
为了把开发环境的配置和生产环境的配置区分开来，我们提取公共配置到到一个配置文件，然后把dev和prod的配置分离。
操作
这里是对每一步的具体操作，主要就是修改配置文件
1.第一步
1.1
修改package.json，加入下面的scripts配置，我们dev环境会用到webpack-dev-server，但prod环境就不需要了
"scripts": {
"--": "先到当前目录找webpack",
"build":"webpack --config ./src/build/webpack.prod.js",
"dev":"webpack-dev-server --config ./src/build/webpack.dev.js"
},1.2
在src目录新建一个build文件夹，然后复制3份webpack.config.js，分别命名为webpack.common.js，webpack.dev.js，webpack.prod.js
2.第二步
2.1
webpack.common.js内容如下，具体视所在环境而定
//打包完创建一个index.html
const HtmlWebpackPlugin = require('html-webpack-plugin');
//打包前清理dist目录
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry:{
bundle:'./src/index.js',
},
module:{
rules:[{
test:/\.(jpg|png|gif)$/,
use:{
loader:'url-loader',
options:{
//placeholder,占位符
name:'[name]_[hash].[ext]',
//指定文件输出路径
outputPath:"images/",
//大于limit则会打包文件返回文件名给js，小于limit会把文件以base64的形式放到js文件中
limit:20480
}
}
},{
test:/\.css$/,
//webpack中loader执行有先后顺序，按照从下到上，从右到左来执行
use:["style-loader",
{
loader:"css-loader",
options:{
//在scss文件引入其它scss的时候，也会从下往上走2个loader，再到
//css-loader，避免遗漏掉import的scss文件
importLoaders:2,
//让css支持模块化打包，不让一个css作用于js的全局
// modules:true,
}
},
"sass-loader",
"postcss-loader"
],
},
{
test:/\.(ttf|eot|svg|wolf|wolf2|woff)$/,
use:{
loader:'file-loader',
options:{
outputPath:"font/",
}
}
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
// presets: [['@babel/preset-env',{useBuiltIns:'usage'}],["@babel/preset-react"]],
presets: [["@babel/preset-react"]],
plugins: [['@babel/plugin-transform-runtime']]
}
}
}
]
},
output:{
// publicPath:"/",
filename: '[name].js',
path: path.resolve("./src",'dist')
},
plugins: [
new HtmlWebpackPlugin({
template:"src/template/index.html"
},),
new CleanWebpackPlugin()
]
}2.2
安装webpack-merge依赖
npm i webpack-merge -D2.3
把公共配置和每种环境独有配置合并导出
webpack.dev.js如下
const path = require('path');
const webpack = require('webpack');
const {merge} = require('webpack-merge');
const commonConfig = require('./webpack.common');
const devConfig = {
mode:'development',
//可以找出报错代码的源代码路径
//cheap 只报告行号（不加会报告列） module 会报告loader及第三方依赖的错误位置
//加了inline就不产生映射文件了
devtool:'cheap-module-eval-source-map',
devServer:{
//会把打包的东西放到内存里面
contentBase:'./dist',
open:true,
hot:true, //模块热更新，不会直接刷新浏览器，影响已经渲染的js模块
hotOnly:true,//就算没渲染好，也不直接刷新
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
]
}
//合并公共配置文件和开发配置文件
module.exports = merge(commonConfig,devConfig);webpack.prod.js如下
const {merge} = require('webpack-merge');
const commonConfig = require('./webpack.common');
const prodConfig = {
mode:'production',
//可以找出报错代码的源代码路径
//cheap 只报告行号（不加会报告列） module 会报告loader及第三方依赖的错误位置
//加了inline就不产生映射文件了
//生产环境不需要eval
devtool:'cheap-module-source-map',
plugins: [
]
}
module.exports = merge(commonConfig,prodConfig);3.总结
避免不同环境不同配置的复杂情况下出现问题，影响开发效率，把不同环境的配置剥离掉