浅谈Webpack自动化构建实践指南(2)

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环境参数动态决定加载对应配置文件:

  1. dev:加载webpack/env.conf.js配置文件;
  2. prod:加载webpack/prod.conf.js配置文件;

我们在项目根目录下创建了webpack目录,其内创建了三个配置文件:

  1. base.conf.js:基础配置文件,在开发,生产环境都需要的配置;
  2. dev.conf.js:开发环境配置文件;
  3. 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文件中配置执行指令:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/336.html