一、webpack 开发和生产环境配置
环境可分为开发和生产,那我们需要做的抽取一个公共js,在根据需求建特有开发和生产的js,并引用公共js。
基于前面的项目配置,这边建三个文件对webpack.config.custom.js
进行拆分与不同js文件变量的合并。
webpack-merge
终端下载插件
npm i webpack-merge -D
;
- 1.
webpack.prod.js
代码如下
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
let OptCss = require('optimize-css-assets-webpack-plugin')
let TerserJSPlugin = require('terser-webpack-plugin');
module.exports = smart(base,{
mode:'production',
optimization: {
minimizer: [
new TerserJSPlugin({}),
new OptCss({})
]
},
})
- 2.
webpack.dev.js
代码如下
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
module.exports = smart(base,{
mode:'development',
devServer: {
port:8081, //端口
progress:true, // 是否显示进度条
contentBase:'./dist', // 打包输出目录
compress:true
},
})
- 3.剩下的配置就留在
web.base.js
文件 - 4.修改下
package.json
的scripts
脚本配置
"scripts": {
"build": "webpack --config webpack.prod.js",
"dev": "webpack-dev-server --config webpack.dev.js"
},
现在可以终端执行下 npm run build
和npm run dev
已经区分了生产和开发环境
二、wenpack 环境变量配置
webpack 内已经定义一个 webpack.DefinePlugin
插件,在这里可以定义字符串,Bool等类型环境变量!
- 1.修改
webpack.prod.js
代码
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
let OptCss = require('optimize-css-assets-webpack-plugin')
let TerserJSPlugin = require('terser-webpack-plugin');
let webpack = require('webpack')
module.exports = smart(base,{
mode:'production',
optimization: {
minimizer: [
new TerserJSPlugin({}),
new OptCss({})
]
},
plugins: [
new webpack.DefinePlugin({
ENV: JSON.stringify('production')
})
]
})
- 2.修改
webpack.dev.js
代码如下
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
let webpack = require('webpack')
module.exports = smart(base,{
mode:'development',
devServer: {
port:8081, //端口
progress:true, // 是否显示进度条
contentBase:'./dist', // 打包输出目录
compress:true
},
devtool: 'eval-source-map',
plugins: [
new webpack.DefinePlugin({
ENV: JSON.stringify("dev"),
// test:'ture' BOOL类型写法
})
]
})
我们在index.js 测试下这个环境变量是否已经成功定义了。
let url = ''
let env = ENV
if (env === 'dev') {
url = 'http://localhost:8081'
console.log('dev:' + url);
}else {
url = 'http://www.baidu.com'
console.log('production:' + url)
}
在使用了eslint检测后,可能会报ENV未定义
需要在未定义代码后面加入eslint-disable
。
现在我们看下两个环境输出的变量结果
开发环境
生产环境
源码下载
创建文件夹,cd至已创建文件夹,执行 git clone https://gitee.com/dolan_ge/webpack.git -b wabpack_environment
。
进入webpack
工程目录,执行 npm install -D