配置 Webpack（ webpack.config.js ）

/**
 * 处理项目
 * 项目根目录创建一个 webpack.config.js 配置文件
 * 需要下载webpack和webpack-cli依赖（webpack@4.41.6 webpack-cli@3.3.11）
 */
const { resolve } = require('path') // reslove用来拼接绝对路径
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const webpack = require('webpack')

module.exports = {
  /**
   * 当输出文件名为 main.js 时
   * 下列对象中的第一项等价于 entry: './src/index.js'
   */
  entry: { // 入口文件
  	main: "./src/index.js",
    other: "./src/other.js"
  },
  output: { // 输出配置
  	/**
     * 常用占位符
     * [name]：入口配置对象中的key
     * [hash] [chunkhash] [contenthash] 
  	 * 对比三个 hash：
     * 1. 都是为了浏览器缓存
     * 2. hash：只要有代码发生变化，所有 bundle 文件都会发生变化
     * 3. contenthash：只有内容发生改变的文件，对应的 bundle 文件才会发生变化
     * 4. chunkhash：同一个 bundle 中有一个的文件发生改变，其他文件也会变化
     * 使用占位符可以获取entry对象中所有的key进行代替，多个key则输出多个文件
     * 在此处 filename: '[name].js' 等价于 filename: 'main.js'
  	 * 占位符可以搭配使用，下列输出为 main-xxxxxx，other-xxxxxx
     * :6 为保留多少位 hash 值
     */
    filename: '[name]-[hash:6].js', // 输出文件名
    /**
     * 输出文件路径配置
     * __dirname nodeJs变量，代表当前文件目录的绝对路径，第二个参数为该路径下的目录
     */
    path: resolve(__dirname, './dist')
  },
  module: { // 模块转换器|模块处理器，每一个 loader 都遵循单一功能原则
    rules: [ // 详细loader配置，不同文件必须配置不同loader处理，loader需要下载相应依赖
      {
      	test: /\.css$/, // 匹配的文件
        /**
         * 使用哪些loader进行处理
         * 数组中loader执行顺序，从右到左 | 从下到上，依次执行
         */
        use: [
          /**
           * 创建style标签，将js中的样式资源插入进去，添加到head中生效
           * 需要安装 style-loader 依赖（style-loader@1.1.3）
           */
        	'style-loader',
          /**
           * 将css文件变成commonJs模块加载到js中（序列化），里面内容是样式字符串
           * 需要安装 css-loader 依赖（css-loader@3.4.2）
           */
          'css-loader'
        ]
      },
      {
      	test: /\.less$/,
        use: [
        	// 'style-loader', 该loader会将 css 放在文档的动态 style 标签里面
          MiniCssExtractPlugin.loader, // 该loader会将 css 单独抽离成一个文件
          'css-loader',
          /**
           * 项目根目录创建一个 postcss.config.js 配置文件
           * 需要安装 postcss-loader 和 postcss 依赖（postcss-loader@4.0.2 postcss@8.0.5）
           */
          'postcss-loader',
          /**
           * 将less文件编译成css文件
           * 需要安装 less-loader 和 less 依赖（less-loader@5.0.0 less@3.11.1）
           */ 
          'less-loader'
        ]
      },
      { 
        /**
         * 处理 js
         * 需要安装 babel-loader、 @babel/core 和 @babel/preset-env 依赖
         * 可以将具体的options单独抽离成 .babelrc | babel.config.js 文件
         */
      	test: /\.js$/,
        use: 'babel-loader'
      },
      { // 处理图片资源，这种方式处理不了html中的img图片
      	test: /\.(jpe?g|png|gif)$/,
        // 需要安装 url-loader 和 file-loader 依赖（url-loader@3.0.0 file-loader@5.0.2）
        user: {
          loader: 'url-loader', // file-loader 是 url-loader 的真子集
          options: {
            /**
             * 当图片大小小于8KB时，用base64处理
             * 优点：减少请求数量（减轻服务器压力）
             * 缺点：图片体积更大（文件请求速度更慢）
             */
            limit: 8 * 1024, // 官方推荐 2 * 1024，即 2KB
            /**
             * 问题：因为 url-loader 默认使用 es6 模块化解析，而 html-loader 引入图片是 commonjs
             * 解析时会出问题：[object Module]
             * 解决：关闭 url-loader 的 es6 模块化，使用 commonjs 解析
             */
            esModule: false,
            /**
             * 给图片进行重命名（打包后图片名过长）
             * [name]取文件原来的名字
             * [ext]取文件原来扩展名
             */
            name: '[hash:10].[ext]',
            // 输出的目标文件夹（创建）
            outputPath: 'imgs'
          }
        },
      },
      { // 处理html文件中img图片资源（负责引入img，从而能被url-loader进行处理）
      	test: /\.html$/,
        // 需要安装 html-loader 依赖（html-loader@0.5.5）
        loader: 'html-loader',
      },
      { 
        /**
         * 打包其他资源（除了html/js/css等资源以外的资源，比如图标，字体）
         * 可以不用test去匹配，而用exclude排除
         */
      	exclude: /\.(css|less|jpg|png|gif|html|js)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  resolveLoader: { // 帮助 webpack 查找或解析 loader 的字段
  	modules: [
      "./nodex_modules", // 默认
      "./myLoaders" // 自定义
    ]
  },
  devtool: "source-map", // 开启了源代码与打包后代码的关系映射，方便调试，如果不需要单独的map文件，而是将内容放在bundle文件中，可以加一个“inline-”前缀，不过这样做会增大bundle文件的体积
  plugins: [ // 插件，webpack 的功能扩展，构建到各自的生命周期中，所以没有执行顺序
    /**
     * 该插件默认会创建一个空的HTML，引入打包输出的所有资源（JS/CSS）
     * 需要安装 html-webpack-plugin 依赖（html-webpack-plugin@3.2.0）
     */
    new HtmlWebpackPlugin({
    	template: './src/index.html', // 输出文件内容参照的模板，并自动引入打包输出的所有资源（JS/CSS）
      filename: 'aifisher.html', // 输出文件名
      chunks: ['main'] // 指定引入的bundle
    }),
    new HtmlWebpackPlugin({
    	template: './src/index.html',
      filename: 'aifisherOr.html',
      chunks: ['other']
    }),
    /**
     * 该插件会清理 dist 中的冗余文件
     * 需要安装 clean-webpack-plugin 依赖（clean-webpack-plugin@3.0.0）
     */
    new CleanWebpackPlugin(),
    /**
     * 该插件会抽离 css
     * 需要安装 mini-css-extract-plugin 依赖（mini-css-extract-plugin @0.11.2）
     */
    new MiniCssExtractPlugin({
    	filename: "index.css", // 抽离出来的 css 文件名
    }),
    new webpack.HotModuleReplacementPlugin() // 热模块更新
  ],
  /**
   * 开启该模式下需要的插件（自支持的），默认为 production
   * none 关闭一部分默认的自支持插件
   * development 开发环境
   * production 生产环境
   */
  mode: 'development',
  /**
   * 开发服务器，用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
   * 启动devServerh指令为：npx webpack-dev-server，需要安装 webpack-dev-server 依赖（webpack-dev-server@3.10.3）
   * 该指令不同于webpack指令（会生成打包文件），它只会在内存中编译打包，不会有任何输出（不会生成打包文件）
   */
  devServer: {
  	contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号，默认 8080
    port: 3000,，
    // 自动打开默认浏览器
    open: true,
    // 代理，解决跨域
    proxy: {
    	"api" : {
      	target: "http://localhost:9092/"
      }
    },
    /**
     * 热模块替换（该功能不支持抽离出的css，对应的loader为 MiniCssExtractPlugin.loader）
     * 原理如下：
     * css文件变化后，浏览器不会自动刷新
     * 按照模块划分，每一个模块都有自己的id
     */
    hot: true,
    hotOnly: true, // 即便 HMR 不生效，浏览器也不会自动刷新
  }
};