webpack之拆分开发环境和生产环境配置

webpack之拆分开发环境和生产环境配置

1、拆分开发环境和生产环境配置

（1）公共路径

publicPath配置选项在各种场景中都非常有用，你可以通过它来指定应用程序中所有资源的基础路径

基于环境配置

在开发环境中，我们通常有一个assets/文件夹，它与索引页面位于同一级别，这没太大问题，但是，如果我们将所有静态资源托管至CDN。然后想在生产环境中使用呢？

想要解决这个问题，可以直接使用一个enviroment variable(环境变量)，假如我们有一个变量ASSET_PATH:

output: {
 publicPath:'http://localhost:8080'//这个路径我们指定为一个域名
}

（2）环境变量

想要消除webpack.config.js在开发环境和产生环境之间的差异，你可能需要环境变量

需要将module.exports里面的配置转化成一个函数
module.exports = (env) => {
  console.log(env);
  mode:env.production ? 'production' : 'development'
}

（3）将js文件进行压缩

npm install terser-webpack-plugin -D
const TerserPlugin = require('terser-webpack-plugin')

optimization ; {
 minimizer:[
 new TerserPlugin()
 ]
}
//在生产环境中执行压缩，在开发环境中就不执行压缩了

2、拆分配置文件

3、npm 脚本

当不希望在生产环境中打包有错误的提示，应该做如下的配置
//所谓的性能方面的配置
performance: {
  hints: false
}

4、提取公共配置

当发现两个配置文件中有大量的重复代码，可以手动的将这些重复的代码单独提取到一个文件里。创建webpack.config.common.js

5、合并配置文件

如何将拆分的webpack.config.dev.js、webpack.config.prod.js、webpack.config.common.js进行合并,此时需要一个npm install webpack-merge -D

新建一个webpack.config.js文件，此文件夹的作用是：将上面三个文件merge到一起

在新建的文件夹中做如下的配置：
const {merge} = require('webpack-merge');
const commonConfig = require('./webpack.config.common');
const productionConfig = require('./webpack.config.prod');
const developmentConfig = require('./webpack.config.dev');
module.exports = (env) => {
switch(true) {
 case env.development:
   return merge(commonConfig, developmentConfig)
 case env.production: 
   return merge(commonConfig, productionConfig)
  default: 
   return newError('No matching configuration was found')//没有匹配到config
}
}