一、环境配置
webpack在运行时可以根据运行环境的不同,可以操作不同的文件等,一般来说环境又开发环境和生产环境,而有可能公司事多弄个测试环境
在node里面可以全局通过NODE_ENV
来获取当前运行环境,从而进行不同的编译
获取环境的代码process.env.NODE_ENV
配置环境的方式有多种,这里个人知识有限,只列知道的三种方式
1、mode
通过mode来配置环境,不过这个又分为两种,一种是重新建文件配置,需要merge
插件配合,一种就是在package.json的npm scripts里面配置,这个可以新建文件,也可以不建,通过判断环境配置不同的配置
新建文件
新建webpack.prod.config.js
和webpack.dev.config.js
,两个文件里面的初始配置差不多
const merge = require('webpack-merge')
const common = requrie('./webpack.common.js')
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
}
})
devServer
是开发环境配置项,这个下一节将devtool
这是是编译工具,开发环境是inline-source-map
,生产环境是source-map
devtool配置
package.json
这个就是在不同的命令中配置
"build": "webpack --mode=production --config webpack.config.js"
"dev": "webpack-dev-server --mode-development --config webpack.config.js"
通过这个方式可以在webpack.config.js
里面通过process.env.NODE_ENV
来判断当前环境
2、env-cross
这个是大佬那里学来的,需要安装cross-env模块
安装
npm install cross-env --save-dev
配置
这个依旧需要在package.json
里面配置,跟上面是差不多的
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpck.config.js"
3、环境文件
根据不同的环境,运行不同的环境文件,来实现环境配置,这个一般还需要另外一个工具配合
webpack.dev.config.js
这个就是开发环境的webpack配置文件,可以在这里面写开发环境需要的东西
const merge = require('webpack-merge')
const common = requrie('./webpack.common.js')
module.exports = merge(common, {
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
}
})
webpack.prod.config.js
这个是生产环境的webpack配置文件,可以在这里面写生产环境需要的东西
const merge = require('merge')
const common = require('./webpack.common.js')
const webpack = require('webpack')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
module.exports = merge(common, {
devtool: 'source-map',
plugins: [
new UglifyJSPlugin({
sourceMap: true
}),
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify('production'), // 这个在上面那个文件应该也配置一个
})
]
})
配置完成上面的两个环境文件后,在package.json
文件里面对npm scripts
也要进行配置修改,根据环境不同,加载不同的环境文件
"build": "webpack --config webpack.prod.js",
"start": "webpack-dev-server --open --config webpack.dev.js"
在上面文件中,webpack.common.js
为webpack公共配置,所有共用的配置项都写在这个文件里面
二、开发环境
开发工具根据官网有三种,至于彼此的使用,太多了,懒得写
开发环境
开发环境需要在webpack中配置开发工具配置项
devServer配置项
devServer: {
publicPath: '', // bound存放的公共路径
contentBase: '', // 输出展示的文件来源
overlay: {} || '', // 警告或报错提示
hot: Boolean, // 热模块功能
host: '', // host
port: , // 要监听的端口号
proxy: {
"/api": {
target: url,
changeOrigin: true,
pathRewrite: {
"^/api": url
}
}
}, // 配置代理服务器,跨域用
}
Tips
热模块功能必须还要配置两个webpack的内置插件才能运行
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
三、生成环境
生产环境
生成环境要求文件小,加载快,所以一般需要处理很多东西,比如压缩,删除console,debugger,删除未引用的js等
删除未引用的js
tree shaking
通过 package.json 的 "sideEffects" 属性,来实现将文件标记为 side-effect-free(无副作用)
{
"sideEffects": false
}
Tips
测试了一下,发现在npm scripts
里面配置环境,无法通过process.env.NODE_ENV
获取,得到的是个undefined,希望有大佬能够指导一下