webpack

npm i webpack webpack-cli -D

npx webpack
执行 npx webpack 默认运行 webpack.config.js 配置文件 并将 src/index.js 构建输出到 dist/main.js
注：npx node8 自带命令，先安装后执行

loader

webpack 默认支持JS和JSON文件，其他类型文件必须借助loader处理。
loader 作用：转换特定类型的文件
css-loader ：处理.css文件，打包.css 文件进bundle.js
style-loader 或 mini-css-extract-plugin中的loader

style-loader ：将bundle.js中的css提取出并通过style标签形式添加到页面
mini-css-extract-plugin中的loader：将bundle.js中的css提取成单独文件，并通过<link href= "css文件地址" rel="stylesheet"> 引入页面

babel-loader 处理js特性中不被特定浏览器(browerslist配置)支持的部分降级处理成es5 api （核心包 core-js）
postcss-loader ：为browerslist配置中需要支持的浏览器列表增加特定css前缀或特定浏览器的css写法。(其中核心包：Autoprefixer)：
less-loader ：处理less 成 css
sass-loader ：处理sass 成 css

loader 执行顺序是从后往前，上一个loader的处理结果会进入下一个loader被处理：

rules: [
      {
        
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'], // 从右往前
      },
      {
        
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader'         
        ], // 从右往前
      },

thread-loader 让写在其后的loader的worker 池中运行（每个 worker 都是一个独立的 node.js 进程）

use: [
          "thread-loader",
          // 耗时的 loader （例如 babel-loader）
        ],

image-webpack-loader 图片压缩loader

plugin

实现单一任务的插件

• html-webpack-plugin 将打包生成的文件（如xxx[hash].js、xxx[hash].css文件）自动插入到html文件中
• eslint-webpack-plugin
  eslint 插件

dev-Server

开发时启动服务器

• hot 热模块替换

webpack-dev-server启动一个服务之后，浏览器和服务端是通过websocket进行长连接，webpack内部实现的watch就会监听文件修改，只要有修改webpack会重新打包编译到内存中，每次热更新都会请求一个携带hash值的json文件和一个js，websocker传递的也是hash值，内部机制通过hash值检查进行模块热替换， 至于内部原理，因为水平限制，目前还看不懂。
hot:true ( 热替换，不刷新页面。如果热更新失败（可能某些模块不支持HMR），则刷新页面；如果编译报错，修改后重新编译通过，则刷新页面)
hot: ‘only’ (如果编译报错，修改后重新编译通过，不刷新页面。)

• proxy 配置接口代理，将本地请求的接口（/a/b）代理到外部地址(http://www.xxx.com/a/b)，从而避开浏览器的同源策略限制，实现跨域请求

设置环境变量

cross-env 设置环境变量，跨平台（windows或linux）可正常运行

"serve": "cross-env NODE_ENV=development VUE_APP_FLAG=local webpack serve -c build/webpack.dev.js",
    "serve:sit": "cross-env NODE_ENV=development VUE_APP_FLAG=sit webpack serve -c build/webpack.dev.js",

optimization 优化

splitChunks 将 boundle.js 分包 （chunk）
webpack分包
默认配置，动态引入的模块（经判断需要时才引入js 、vue组件），才会抽离出来;
默认值有2个配置，1个是vendors （将供应商（node_modules）的抽离一个文件），1个是其他文件，（超大或 共享且动态引入 才会抽离）。
可在spliChunks.cacheGroup中指定那个路径的包单独抽离，比如element-ui

optimization: {
    chunkIds: 'named',
    splitChunks: { // 将 boundle.js 分包 
      chunks: 'all',
      cacheGroups: {
       
        'element-ui': {
          name: 'element-ui',
          chunks: 'all',
          test: /[\\/]node_modules[\\/]element-ui[\\/]/,
          priority: 40,
        },

minimizer 最小化

optimization: {
    minimizer: [
      new CssMinimizerPlugin({ //css-minimizer-webpack-plugin 压缩优化css
        parallel: 4,
      }),
      new TerserPlugin({ // terser-webpack-plugin 压缩混淆js
        parallel: 4,
        terserOptions: {
          parse: {
            ecma: 8,
          },