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文件中配置执行指令:
内容版权声明:除非注明,否则皆为本站原创文章。