webpack--分离

如何区分开发环境

目前我们所有的webpack配置信息都是放到一个配置文件中的：webpack.config.js

• 当配置越来越多时，这个文件会变得越来越不容易维护；

• 并且某些配置是在开发环境需要使用的，某些配置是在生成环境需要使用的，当然某些配置是在开发和生成环境都会使用的；

• 所以，我们最好对配置进行划分，方便我们维护和管理；

那么，在启动时如何可以区分不同的配置呢？

• 方案一：编写两个不同的配置文件，开发和生成时，分别加载不同的配置文件即可；

• 方案二：使用相同的一个入口配置文件，通过设置参数来区分它们；

方案一:

1.创建三个文件夹

-config
-- webpack.comm.config.js 公共环境的配置文件
-- webpack.dev.config.js 开发环境下的配置文件
-- webpack.prod.config.js 生产环境下的配置文件

2.配置 package.json

3.分离代码

• 1. 首先将 webpack.config.js 里面的代码 复制到 webpack.comm.config.js(公共环境的配置文件)
• 2. 然后拆分 webpack.comm.config.js(公共环境的配置文件)
• 3. 把开发依赖的 放在 webpack.dev.config.js 里
• 4. 把生产依赖的 放在 webpack.prod.config.js 里

4. 代码合并

npm install webpack-merge -D

• 因为 开发环境的代码 和 生产环境的代码都被分割出去了

• 剩下的就是 webpack.comm.config.js(公共环境的配置文件), 生产和开发都需要的代码

• 所以 要把公共的代码 合并到 开发环境 和 生产环境, 这样就都有公共代码了!!

5.代码

webpack.dev.config.js(开发环境配置文件)

/* 开发环境
 * @Date: 2021-09-18 20:58:43
 */
const {merge} = require(‘webpack-merge‘) //导入合并的包

const commonConfig = require(‘./webpack.comm.config‘)// 导入公共代码

module.exports = merge(commonConfig,{
    // development 开发阶段, 会设置development
    mode: "development",
    // 设置source-map, 建立js映射文件,方便调试
    devtool: "source-map",
    devServer:{
      // contentBase:"./public" // 项目构建后路径
      hot:true,// 开启HMR功能
      host:"0.0.0.0", // 同一局域网下通过ip可以访问此服务
      port:7777,// 端口号
      open:true,// 自动打开浏览器
      compress:true, // 自动gzip压缩
      proxy:{// 服务器代理, 解决开发环境跨域问题 
        ‘/api‘:{ // 当以api开头请求, 就会把请求转发到另外一个服务器(8888)
            target:‘http:localhost:8888‘,
            pathRewrite:{
                ‘^/api‘:‘‘// 请求路径重写; 将/api 替换成 ""空, 防止接口上多一个api字符
            }
        }
      }
    },
})

webpack.prod.config.js(生产环境配置文件)

/* 生产环境
 * @Date: 2021-09-18 20:58:53
 */

const { CleanWebpackPlugin } = require("clean-webpack-plugin") // 自动删除
const CopyWebpackPlugin = require("copy-webpack-plugin") // 用来拷贝

const {merge} = require(‘webpack-merge‘) //导入合并的包
const commonConfig = require(‘./webpack.comm.config‘)// 导入公共代码

module.exports = merge(commonConfig,{
  // production 准备打包上线的时候， 会设置production
  mode: "production",
  plugins:[
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [ // 匹配文件夹 可多个
        {
          from: "./public", // 从哪里开始复制 (从public里复制)
          to: "./",// 复制到哪里 (复制到打包后的build根目录)
          globOptions: {
            ignore: [ // 忽略的文件 (所有index.html文件)
              "**/index.html"
            ]
          }
        }
      ]
    }),
  ]
})

webpack.comm.config.js(公共环境的配置文件)
此处省略...

5.打包成功

原文：https://www.cnblogs.com/cl1998/p/15310304.html