标签：const js 学习 webpack path loader css

什么是webpack？

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。
那么这些资源都要交给构建工具处理，我们首先告诉webpack一个入口文件，他会以这个入口文件作为起点文件打包，将每一个依赖都会记录好，形成树状依赖图。依次将资源引进来，进行编译打包生成静态资源。
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

什么是构建工具？

我们使用ES6+来开发项目，使用less/sass/stylus等css预处理器来写样式，这些语法浏览器都无法识别，只能通过一个个小工具来翻译为浏览器能识别的语言，而这些小工具我们需要一个个来维护，很麻烦，所以提出了找一个大的工具，将这些小的工具的功能都包含起来，我们只要关心这个大的工具怎么使用就可以了，这个更大的工具就叫构建工具。

为什么要用webpack？

开发模式工作：

源代码（包含ES6语法，less/sass文件）——> webpack ——> bundle文件，被浏览器运行。
自动化工作，自动打开浏览器，自动编译，自动刷新等，让开发效率更高。

生产环境工作：

css—>js导致js文件很大，需要从js中提取出来。
对代码进行压缩
样式和部分js代码有兼容性问题，比如：样式的css3针对不同浏览器加前缀等
代码更快，性能更好，更平稳的运行

这些如果放到开发环境中，运行会很慢，不利于开发。

总结：
webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。
不能编译打包 css、img 等文件
在webpack看来一切都是模块，包括javascript代码，css和fonts以及图片等等，只有通过合适的loaders，都可以被当作模块处理。并且webpack提供了拆分代码后异步加载的方式，即先加载某个主模块，以后按需加载。
消除对未引用资源的依赖。
dev-server：自动打开浏览器，实现代码的热编译。

注意：webpack默认只能识别js文件和json文件，其他的文件识别不了，都需要使用对应的编译工具才可以。

webpack的核心配置

Entry

指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的，每个依赖项随即被处理，最后输出到称之为 bundles 的文件中；
可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src
webpack配置中定义entry属性的多种方式:
方式一：单个入口简写方式

const config = {
  entry: './path/entry/file.js'
};
module.export = config;

当在寻找为只有一个入口起点的应用程序或工具（即 library）快速设置 webpack 配置的时候，这很不错。然而，使用此语法在扩展配置时有失灵活性

方式二：对象语法： entry: {[entryChunkName: string]: string|Array}

const config = {
  entry: {
    main: './path/entry/file.js'
  }
}

对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式

方式三：分离应用程序(app) 和第三方库(vendor) 入口示例

const config = {
  entry: {
    app: './path/entry/app.js',
    vendor: './path/entry/vendor.js',
  }
}

这种方式比较常见于，只有一个入口起点（不包括 vendor）的单页应用程序(single page application)中

方式四：多页面配置

const config = {
  entry: {
    pageOne: './path/entry/one.js',
    pageTwo: './path/entry/two.js',
    pageThree: './path/entry/three.js',
  }
};

Webpack 需要 3 个独立分离的依赖图；每个 HTML 文档只使用一个入口起点

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

/*
  entry: 入口起点
    1. string --> './src/index.js'
      单入口
      打包形成一个chunk。 输出一个bundle文件。
      此时chunk的名称默认是 main
    2. array  --> ['./src/index.js', './src/add.js']
      多入口
      所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
        --> 只有在HMR功能中让html热更新生效~
    3. object
      多入口
      有几个入口文件就形成几个chunk，输出几个bundle文件
      此时chunk的名称是 key

      --> 特殊用法
        {
          // 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
          index: ['./src/index.js', './src/count.js'], 
          // 形成一个chunk，输出一个bundle文件。
          add: './src/add.js'
        }
*/

module.exports = {
  entry: {
    index: ['./src/index.js', './src/count.js'], 
    add: './src/add.js'
  },
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'build')
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};

output

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。
你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
注意：即使可以存在多个入口起点，但只指定一个输出配置
在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：filename 用于输出文件的文件名和目标输出目录 path 的绝对路径：

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};
module.export = config;

此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中

如果配置创建了多个单独的 “chunk”（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件）,则应该使用占位符(substitutions)来确保每个文件具有唯一的名称:

const config = {
  entry: {
    app: './entry/app.js',
    search: './entry/search.js'
  }
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
//写入到硬盘中的 './dist/app.js' 和 './dist/search.js'
};
module.export = config;

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    // 文件名称（指定名称+目录）
    filename: 'js/[name].js',
    // 输出文件目录（将来所有资源输出的公共目录）
    path: resolve(__dirname, 'build'),
    // 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
    publicPath: '/',
    chunkFilename: 'js/[name]_chunk.js', // 非入口chunk的名称
    // library: '[name]', // 整个库向外暴露的变量名
    // libraryTarget: 'window' // 变量名添加到哪个上 browser
    // libraryTarget: 'global' // 变量名添加到哪个上 node
    // libraryTarget: 'commonjs'
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（如 TypeScript）
loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块
在更高层面，在 webpack 的配置中 loader 有两个目标：

test  用来标识出应该被对应的loader进行转换的某个或某些文件，
use   用来标识进行转换时，应该使用哪个loader

注意：在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules
使用loader主要有三种方式：
方式一：配置形式（推荐）
在 webpack.config.js 文件中指定 loader

module.export = {
  module: {
    rules:[
      {test: /\.css$/, use:'css-loader'}
      {test: /\.ts$/, use:'ts-loader'}
    ]
  }
}

方式二：内联配置loader
在每个 import 语句中显式指定 loader。
可以在 import 语句或任何等效于 “import” 的方式中指定 loader。使用 ! 将资源中的多个 loader 分开。分开的每个部分都相对于当前目录解析。

import Styles from 'style-loader!css-loader?modules!./styles.css';

方式三：CLI命令中指定loader
在 shell 命令中指定它们

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

loader的特性：

loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
loader 可以是同步的，也可以是异步的。
loader 运行在 Node.js 中，并且能够执行任何可能的操作。
loader 接收查询参数。用于对 loader 传递配置。
loader 也能够使用 options 对象进行配置。
除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
插件(plugin)可以为 loader 带来更多特性。
loader 能够产生额外的任意文件。

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/[name].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/,
        // 多个loader用use
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.js$/,
        // 排除node_modules下的js文件
        exclude: /node_modules/,
        // 只检查 src 下的js文件
        include: resolve(__dirname, 'src'),
        // 优先执行
        enforce: 'pre',
        // 延后执行
        // enforce: 'post',
        // 单个loader用loader
        loader: 'eslint-loader',
        options: {}
      },
      {
        // 以下配置只会生效一个
        oneOf: []
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};

plugins

插件（Plugins）可以用于执行范围更广的任务，插件的范围包括，从打包优化和压缩，一直到重新定义环境的变量等。
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。
插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。
多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 自动引入资源插件  npm install --save-dev html-webpack-plugin
const MiniCssExtracPlugin = require("mini-css-extrac-plugin"); // css抽离
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin"); // css压缩
//加载toml、yarm、json5数据资源 npm install toml yarm json5 -D
const toml = require("toml");      
const yarm = require("yarm");      
const json5 = require("json5");   

module.exports = {
  entry: "./src/index.js", // 入口文件
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"),
    clean: true, // 清除上一次的垃圾文件
    assetModuleFilename: "images/[contenthash][ext]", // 在images目录下，根据文件内容自动生成hash文件名
  },
  mode: "development", // 开发环境
  devtool: "inline-source-map", // 真实报错文件指向
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html", // 模板
      filename: "app.html",
      inject: "body", // script 存在的位置
    }),
    new MiniCssExtracPlugin({
      filename: "style/[contenthash].css",
    }),
  ],
  devServer: {
    static: "./dist", // 监听根目录文件变化，自动刷新页面插件 npm install --save-dev webpack-dev-server
  },
  // 模块
  module: {
    rules: [
    //资源模块类型我们称之为Asset Modules Type，总共有四种，来代替loader，分别是：
    // asset/resource：发送一个单独的文件并导出URL，替代file-loader
    // asset/inline：导出一个资源的data URI(base64)，替代url-loader
    // asset/source：导出资源的源代码，之前通过使用raw-loader实现
    // asset：介于asset/resource和asset/inline之间， 之前通过url-loader+limit属性实现。
     {
        test: /\.(png|gif|jp?g|svg|webp|ico)$/, // 正则图片文件
        type: "asset",
        generator: {
          filename: "images/[contenthash][ext]", // 优先级高于 assetModuleFilename
        },
     },
     {
        //抽离 npm install mini-css-extrac-plugin  --save-dev   webpack5环境下构建的插件
        test: /\.(le|c)ss$/, // .less and .css
        use: [MiniCssExtracPlugin.loader, "css-loader", "less-loader"],
      },
      // {
      //   //支持less
      //   // npm install style-loader css-loader less-loader less --save-dev
      //   test: /\.(le|c)ss$/, // .less and .css
      //   use: ["style-loader", "css-loader", "less-loader"], // 创建的css文件存在html的头部
      // },
      {
        test: /\.(woff|woff2|eot|ttf|oft)$/, // 正则字体文件
        type: "asset/resource",
      },
      //加载csv、xml数据资源 npm install csv-loader xml-loader -D
      {
        test: /\.(csv|tsv)$/, 
        use:'csv-loader'
      },
      {
        test: /\.xml$/, 
        use:'xml-loader'
      },
      //加载toml、yarm、json5数据资源
      {
        test: /\.toml$/, 
        type:'json',
        parser:{
          parse:toml.parse
        }
       },
       {
        test: /\.yarm$/, 
        type:'json',
        parser:{
          parse:yarm.parse
        }
       },
       {
        test: /\.json5$/, 
        type:'json',
        parser:{
          parse:json5.parse
        }
       },
      // loader工具 支持数组方式链式调用，数组靠后的元素先执行
      {
      // 压缩图片
      //图片小于一定大小使用base64 否则使用file-loader产生真实图片 npm install url-loader --save-dev
        test: /\.(png|gif|jp?g|svg|webp|ico)$/, // 正则
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 5000, //小于限定使用base64
              name: "home/images/[name].[hash:8].[ext]",
              publicPath: `../../`,
              esModule: false,
            },
          },
        ],
      },
      // 使用babel-loader npm install -D babel-loader @babel/core @babel/preset-env 
      // regeneratorRuntime是webpack打包生成的全局辅助函数，由babel生成，用于兼容 async/await 的语法
      // npm install --save @babel/runtime
      // npm install --save-dev @babel/plugin-transform-runtime
      {
        test: /\.js$/,
        exclude: /node_modules/, // *业务代码里面可能会引入node_modules外部js，这些js不需要babel-loader编译，因此需要排除掉
        use: {
          loader: 'babel-loader', // *引入babel-loader
          options: {
            presets: ['@babel/preset-env'], // *引入预设
            plugins: [
            [
              '@babel/plugin-transform-runtime' // *配置插件信息
            ]
          ]
          }
        }
      }
    ],
  },
  optimization: {
    //压缩 npm install css-minimizer-webpack-plugin  --save-dev   mode改为 production
    minimizer: [new CssMinimizerWebpackPlugin()],
  },
};

mode

模式（Mode）指示Webpack使用相应模式的配置，即其他格式文件的编译器依赖配置
通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
在配置中提供 mode 选项：
development开发模式：能让代码本地调试运行的环境
production生产模式：能让代码优化上线运行的环境

module.config = {
  mode:'development' // 或者 production
}

webpack打包命令

package.json加入打包命令"build": "webpack"，在项目根目录执行yarn build或npm run build即可执行webpack打包。

小结：

1、webpack只能处理js/json文件不能处理css/img等其他资源（打包失败）
2、要处理其他类型的文件，需要配置loader；不同文件要配置不同loader
3、想要开发过程中使用的方便，需要根据需求配置插件
4、生产环境和开发环境区别：生产环境比开发环境多了一个压缩js代码
5、生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化

webpack配置信息样板

基本配置信息

const path = require('path');
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
module.exports = {
    devtool: 'inline-source-map',
    entry: {
        index: './src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }, {
            test: /\.(png|svg|jpg|gif)$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: 'img/[name].[hash:7].[ext]'
            }
        }, {
            test: /\.(js|jsx)$/,
            use: 'babel-loader',
            exclude: /node_modules/
        }]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlPlugin({
            template: 'public/index.html'
        })
    ],
  mode:'production'
  devServer: {
        // contentBase: './build',
        port: 8081, // 端口号
        // inline: true,
        hot: true
    },
}

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 自动引入资源插件  npm install --save-dev html-webpack-plugin
const MiniCssExtracPlugin = require("mini-css-extrac-plugin"); // css抽离
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin"); // css压缩
//加载toml、yarm、json5数据资源 npm install toml yarm json5 -D
const toml = require("toml");      
const yarm = require("yarm");      
const json5 = require("json5");   

module.exports = {
  entry: "./src/index.js", // 入口文件
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"),
    clean: true, // 清除上一次的垃圾文件
    assetModuleFilename: "images/[contenthash][ext]", // 在images目录下，根据文件内容自动生成hash文件名
  },
  mode: "development", // 开发环境
  devtool: "inline-source-map", // 真实报错文件指向
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html", // 模板
      filename: "app.html",
      inject: "body", // script 存在的位置
    }),
    new MiniCssExtracPlugin({
      filename: "style/[contenthash].css",
    }),
  ],
  devServer: {
        static: "./dist", // 监听根目录文件变化，自动刷新页面插件 npm install --save-dev webpack-dev-server
        // contentBase: './build',
        port: 8081, // 端口号
        // inline: true,
        hot: true
    },
  // 模块
  module: {
    rules: [
    //资源模块类型我们称之为Asset Modules Type，总共有四种，来代替loader，分别是：
    // asset/resource：发送一个单独的文件并导出URL，替代file-loader
    // asset/inline：导出一个资源的data URI(base64)，替代url-loader
    // asset/source：导出资源的源代码，之前通过使用raw-loader实现
    // asset：介于asset/resource和asset/inline之间， 之前通过url-loader+limit属性实现。
     {
        test: /\.(png|gif|jp?g|svg|webp|ico)$/, // 正则图片文件
        type: "asset",
        generator: {
          filename: "images/[contenthash][ext]", // 优先级高于 assetModuleFilename
        },
     },
     {
        //抽离 npm install mini-css-extrac-plugin  --save-dev   webpack5环境下构建的插件
        test: /\.(le|c)ss$/, // .less and .css
        use: [MiniCssExtracPlugin.loader, "css-loader", "less-loader"],
      },
      // {
      //   //支持less
      //   // npm install style-loader css-loader less-loader less --save-dev
      //   test: /\.(le|c)ss$/, // .less and .css
      //   use: ["style-loader", "css-loader", "less-loader"], // 创建的css文件存在html的头部
      // },
      {
        test: /\.(woff|woff2|eot|ttf|oft)$/, // 正则字体文件
        type: "asset/resource",
      },
      //加载csv、xml数据资源 npm install csv-loader xml-loader -D
      {
        test: /\.(csv|tsv)$/, 
        use:'csv-loader'
      },
      {
        test: /\.xml$/, 
        use:'xml-loader'
      },
      //加载toml、yarm、json5数据资源
      {
        test: /\.toml$/, 
        type:'json',
        parser:{
          parse:toml.parse
        }
       },
       {
        test: /\.yarm$/, 
        type:'json',
        parser:{
          parse:yarm.parse
        }
       },
       {
        test: /\.json5$/, 
        type:'json',
        parser:{
          parse:json5.parse
        }
       },
      // loader工具 支持数组方式链式调用，数组靠后的元素先执行
      {
      // 压缩图片
      //图片小于一定大小使用base64 否则使用file-loader产生真实图片 npm install url-loader --save-dev
        test: /\.(png|gif|jp?g|svg|webp|ico)$/, // 正则
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 5000, //小于限定使用base64
              name: "home/images/[name].[hash:8].[ext]",
              publicPath: `../../`,
              esModule: false,
            },
          },
        ],
      },
      // babel的作用是把es6转换成es5
      // 使用babel-loader npm install -D babel-loader @babel/core @babel/preset-env 
      // regeneratorRuntime是webpack打包生成的全局辅助函数，由babel生成，用于兼容 async/await 的语法
      // npm install --save @babel/runtime
      // npm install --save-dev @babel/plugin-transform-runtime
      {
        test: /\.js$/,
        exclude: /node_modules/, // *业务代码里面可能会引入node_modules外部js，这些js不需要babel-loader编译，因此需要排除掉
        use: {
          loader: 'babel-loader', // *引入babel-loader
          options: {
            presets: ['@babel/preset-env'], // *引入预设
            plugins: [
            [
              '@babel/plugin-transform-runtime' // *配置插件信息
            ]
          ]
          }
        }
      }
    ],
  },
  optimization: {
    //压缩 npm install css-minimizer-webpack-plugin  --save-dev   mode改为 production
    minimizer: [new CssMinimizerWebpackPlugin()],
  },
};

react项目中路径别名配置

alias: {
    'react-native': 'react-native-web',
    ...(isEnvProductionProfile && {
      'react-dom$': 'react-dom/profiling',
      'scheduler/tracing': 'scheduler/tracing-profiling',
    }),
    ...(modules.webpackAliases || {}),
    '@': path.resolve(__dirname, '../src')
  },

配置resolve

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/[name].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development',
  // 解析模块的规则
  resolve: {
    // 配置解析模块路径别名: 优点简写路径 缺点路径没有提示
    alias: {
      $css: resolve(__dirname, 'src/css')
    },
    // 配置省略文件路径的后缀名
    extensions: ['.js', '.json', '.jsx', '.css'],
    // 告诉 webpack 解析模块是去找哪个目录
    modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
  }
};

配置dev server

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/[name].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development',
  resolve: {
    alias: {
      $css: resolve(__dirname, 'src/css')
    },
    extensions: ['.js', '.json', '.jsx', '.css'],
    modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
  },
  devServer: {
    // 运行代码的目录
    contentBase: resolve(__dirname, 'build'),
    // 监视 contentBase 目录下的所有文件，一旦文件变化就会 reload
    watchContentBase: true,
    watchOptions: {
      // 忽略文件
      ignored: /node_modules/
    },
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 5000,
    // 域名
    host: 'localhost',
    // 自动打开浏览器
    open: true,
    // 开启HMR功能
    hot: true,
    // 不要显示启动服务器日志信息
    clientLogLevel: 'none',
    // 除了一些基本启动信息以外，其他内容都不要显示
    quiet: true,
    // 如果出错了，不要全屏提示~
    overlay: false,
    // 服务器代理 --> 解决开发环境跨域问题
    proxy: {
      // 一旦devServer(5000)服务器接受到 /api/xxx 的请求，就会把请求转发到另外一个服务器(3000)
      '/api': {
        target: 'http://localhost:3000',
        // 发送请求时，请求路径重写：将 /api/xxx --> /xxx （去掉/api）
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

配置optimization

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build'),
    chunkFilename: 'js/[name].[contenthash:10]_chunk.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'production',
  resolve: {
    alias: {
      $css: resolve(__dirname, 'src/css')
    },
    extensions: ['.js', '.json', '.jsx', '.css'],
    modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
      // 默认值，可以不写~
      /* minSize: 30 * 1024, // 分割的chunk最小为30kb
      maxSiza: 0, // 最大没有限制
      minChunks: 1, // 要提取的chunk最少被引用1次
      maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量
      maxInitialRequests: 3, // 入口js文件最大并行请求数量
      automaticNameDelimiter: '~', // 名称连接符
      name: true, // 可以使用命名规则
      cacheGroups: {
        // 分割chunk的组
        // node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js
        // 满足上面的公共规则，如：大小超过30kb，至少被引用一次。
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          // 优先级
          priority: -10
        },
        default: {
          // 要提取的chunk最少被引用2次
          minChunks: 2,
          // 优先级
          priority: -20,
          // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
          reuseExistingChunk: true
        }
      }*/
    },
    // 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
    // 解决：修改a文件导致b文件的contenthash变化
    runtimeChunk: {
      name: entrypoint => `runtime-${entrypoint.name}`
    },
    minimizer: [
      // 配置生产环境的压缩方案：js和css
      new TerserWebpackPlugin({
        // 开启缓存
        cache: true,
        // 开启多进程打包
        parallel: true,
        // 启动source-map
        sourceMap: true
      })
    ]
  }
};

标签：const,js,学习,webpack,path,loader,css
From： https://www.cnblogs.com/ymwmn/p/16818672.html

webpack学习