Webpack配置文件
首先我们在根目录下创建webpack.config.js配置文件:
module.exports = function () {
let env
let _DEV_ = true // 开发环境
let _PROD_ = false // 生产环境
switch (process.env.NODE_ENV) {
case 'dev':
env = 'dev'
_DEV_ = true
_PROD_ = false
break
case 'production':
env = 'prod'
_DEV_ = false
_PROD_ = true
break
default:
env = 'dev'
_DEV_ = true
_PROD_ = false
}
// 根据环境参数动态决定引入对应配置文件
return require(`./webpack/${env}.conf.js`)({
ROOTPATH: __dirname,
_DEV_,
_PROD_
})
}
根据process.env.NODE_ENV环境参数动态决定加载对应配置文件:
- dev:加载webpack/env.conf.js配置文件;
- prod:加载webpack/prod.conf.js配置文件;
我们在项目根目录下创建了webpack目录,其内创建了三个配置文件:
- base.conf.js:基础配置文件,在开发,生产环境都需要的配置;
- dev.conf.js:开发环境配置文件;
- prod.conf.js:生产环境打包配置文件;
开发环境配置
开发环境配置文件中定义了一些开发使用的构建配置,然后引入基础配置文件,使用webpack-merge三方库,将开发环境配置合并至基础配置对象,然后返回开发环境打包构建配置对象,作为Webpack打包构建的参数:
const webpackMerge = require('webpack-merge')
const PUBLICPATH = '/assets/'
const PORT = '9090'
let options = { /* ... */ }
module.exports = function (args) {
options.ROOTPATH = args.ROOTPATH
options.env = args.env
return webpackMerge(require('./base.conf')(options), {
devtool: 'source-map',
devServer: {
contentBase: path.join(args.ROOTPATH, './src'),
historyApiFallback: true,
inline: true,
hot: true,
port: PORT,
proxy: {
'*': `http://localhost:${PORT}/${PUBLICPATH}/`
}
},
plugins: []
})
}
生产环境配置
生产环境配置文件中定义了的是生产环境使用的构建配置,然后也是引入基础配置文件,使用webpack-merge三方库,将生产环境配置合并至基础配置,然后返回配置对象,作为Webpack打包构建的参数:
let options = { /* ... */}
module.exports = function (args) {
options.ROOTPATH = args.ROOTPATH
options.env = args.env
return webpackMerge(require('./base.conf')(options), {
plugins: [
new webpack.DefinePlugin({
'process.env': 'production'
}),
// 生成独立css文件
new ExtractTextPlugin({
filename: 'css/[name].css'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
})
}
指令
然后就是为不同环境配置可执行指令,我们使用npm scripts方式,在package.json文件中配置执行指令:
内容版权声明:除非注明,否则皆为本站原创文章。
