webpack的配置分离相关（webpack-merge）

webpack的配置分离（webpack-merge）

• webpack中有些配置是开发时需要的（如devServer），有些是发布时需要的（如uglify），我们可将webpack的配置分为不同文件以适应不同需求。
• 用到的webpack插件：webpack-merge (提取公共配置，减少重复配置代码)

1. 分离文件

• build文件夹：放置webpack配置
  • base.config.js 公共配置
  • dev.config.js 开发时配置
  • prod.config.js 生产时配置

2. 安装

npm install --save-dev webpack-merge

3. 文件内容和配置

• 重点语句
  • 导入基础配置 const baseConfig = require('./webpack.config');
  • 结合基础配置 module.exports = WebpackMerge(baseConfig, {})

• dev.config.js 开发时配置

  //导入基础配置
  const baseConfig = require('./webpack.config');
  //merge插件
  const WebpackMerge = require('webpack-merge');
  
  //当前配置结合base配置
  module.exports = WebpackMerge(baseConfig, {
    devServer: {
      contentBase: '/dist',
      inline: true,
    }
  });
  

• prod.config.js 生产时配置

  const baseConfig = require('./webpack.config');
  const WebpackMerge = require('webpack-merge');
  
  const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
  
  module.exports = WebpackMerge(baseConfig, {
    plugins: [
      new UglifyjsWebpackPlugin()
    ]
  });
  

• 注意 webpack.config.js 修改output的路径（之前是没有build文件夹的,不然dist会生成到build文件夹下）

  • 原 ：path: path.resolve(__dirname, 'dist'),
  • 修改为 ：path: path.resolve(__dirname, '../dist'),

4. package.json中给对应命令行添加关于配置文件的设置(--config)

• 重点 --config ./build/prod.config.js
• 修改build命令和dev命令

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --config ./build/prod.config.js",
  "dev": "webpack-dev-server --config ./build/dev.config.js --open"
},