development / production 不同配置文件打
2019-08-24 本文已影响0人
一半春夏一半秋冬
应用场景:项目开发时一般需要使用两套配置文件,用于开发阶段打包和生成环境打包
使用的webpack插件:webpack-merge
步骤:
第一,抽取三个配置文件:
webpack.base.js (公共配置文件)
webpack.prod.js (生产环境)
webpack.dev.js (开发环境)
将开发环境和生成环境公用的配置放入base中,不同配置各自放入prod或dev中
第二、在dev和prod中使用webpack-merge把自己的配置与base的配置进行合并后导出
1/安装webpack-merge: npm i webpack-merge --D
2/ 引入:插件和base
3/ 把自己的配置文件和baseConfig一起传入,baseConfig作为第一个参数,prod配置文件作为第二个参数
const merge = require('webpack-merge')
const baseConfig = reqiure('./webpack.base.js')
module.exports = merge(baseConfig, {
mode:'prodeuction', // 项目所需的 配置文件
devtool:'cheap-module-source-map'
})
第三:在package.json文件中配置打包命令参数
'scripts':{
'build':'webpack --config ./build/webpack.prod.js',
'dev':'webpack-dev-server --config ./build/wewbpack.dev.js'
}
注意:
1/优化一般是放在prod的配置中,代码的优化:如拆分、加密都是在生成环境才需要
2/webpack是基于node环境的,所以引入文件需要require,而不能使用import