自定义 webpack 配置1：基础配置

参考 webpack教程、create-react-app（eject后）配置，自定义一个适合的、可维护的webpack配置

1.初始化

yarn init

初始化成功

yarn init v1.17.3
question name (my-webpack-config): 
question version (1.0.0): 
question description: 
question entry point (index.js): 
question repository url (https://github.com/1071942338/my-webpack-config.git): 
question author (张文旗 <1071942338@qq.com>): 
question license (MIT): 
question private: 
success Saved package.json
✨  Done in 10.97s.

2.安装 webpack webpack-cli

yarn add webpack webpack-cli -D

3. package.json 添加 build 脚本

3.1 添加 index.js 文件

1. 新建 src 文件夹
2. 新建 index.js 文件

console.log("Hello Webpack !");

3.2 添加 webpack.config.js 文件

1. 新建 config 文件夹
2. 新建 webpack.config.js 文件

module.exports = {
  //指定入口文件
  entry: "./src/index.js",
  output: {
    //输出文件名称
    filename: "main.js",
  },
  //暂时指定开发模式
  mode: "development",
};

3.3 package.json 添加 scripts:build

  "scripts": {
    "build": "webpack --config ./config/webpack.config.js"
  },

3.4 执行构建脚本

yarn build

yarn run v1.17.3
$ webpack --config ./config/webpack.config.js
Hash: 33226b34c0395d779dc7
Version: webpack 4.44.1
Time: 47ms
Built at: 2020/08/10 下午2:31:51
  Asset     Size  Chunks             Chunk Names
main.js  3.8 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/index.js] 32 bytes {main} [built]
✨  Done in 0.60s.

3.5 执行结果

1. 生成 dist 文件夹
2. dist 目录下生成 main.js 文件
3. dist 目录添加 index.html 文件并使用 main.js ，可在控制台看到打印内容：Hello Webpack !

4. 拆分 webpack.config.js

4.1 拆分目的

• 开发和生产环境需求不同，例如开发需要热更新及时查看代码效果，生成需要压缩代码
• 便于维护

4.2 拆分结果

• webpack.base.js 公共配置
• webpack.dev.js 开发开发配置
• webpack.prod.js 生成环境配置

4.3 拆分工具

需要用到webpack-merge

yarn add webpack-merge -D

4.3 然后修改文件内容

<!-- webpack.base.js -->
module.exports = {
  //指定入口文件
  entry: "./src/index.js",
  output: {
    //输出文件名称
    filename: "main.js",
  },
};

<!-- webpack.dev.js -->
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base");
module.exports = merge(baseConfig, {
  mode: "development",
});

<!-- webpack.prod.js -->
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base");
module.exports = merge(baseCon