webpack配置

浏览器兼容 -> browserslistrc
babel-loader

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env']
            ]
          }
        }
      }
    ]

eslint

  plugins:[new ESLintPlugin({
    extensions:['.js','.jsx'] //不加 .jsx 就不检查jsx文件
  })],

打包TypeScript

    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env'],
              ['@babel/preset-react',{runtime:'classic'}],
              ['@babel/preset-typescript']
            ]
          }
        }
      }

支持@alias

  resolve:{
    alias:{
      '@':path.join(__dirname,'./src/')
    }
  }

/tscongfig.json

  "paths":{
    "@/*":["src/*"]
  }

支持 SCSS

    rules:[
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },

    ]

SCSS 自动 import 全局文件

    rules:[
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader:'sass-loader',
            options:{
              additionalData:`@import "~@/xxx.scss";`,
              sassOptions:{
                includePaths:[__dirname]
              }
            }
          }
        ]
      },

支持 LESS 文件

    rules:[
      ...
      {
        test: /\.less$/i,
        use: [
          'style-loader',
          {
            loader:'css-loader',
            options:{
              modules:{
                compileType:'icss'  //支持export
              }
            }
          },
          {
            loader:'less-loader'
          }
          ...
        ]
      },
      ...

提取单独的CSS文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
const mode='production'
const cssLoaders = (...loaders) => [
  mode === ' production' ? MiniCssExtractPlugin.loader : 'style-loader',
  {
      loader:'css-loader',
      {
        loader:'css-loader',
        options:{
          modules:{
            compileType:'icss'  //支持export
          }
        }
      },
  },
  ..._loaders
]
...
module.exports={
  mode:mode
  ...
  plugins:[
    new ESLintPlugin({
      extensions:['.js','.jsx','.ts','.tsx']
    }),
    new MiniCssExtractPlug({
      filename:'[name].[contenthash].css'  //给css加hash
    })
  ],
  output:{
    filename:'[name].[contenthash].js'  //给js加hash
  },
  ...
  module:{
    ...
  }
}
...

自动生成HTML

  plugins:[
    new ESLintPlugin({
      extensions:['.js','.jsx','.ts','.tsx']
    }),
    mode === 'production' && new MiniCssExtractPlug({
      filename:'[name].[contenthash].css'  //给css加hash
    }),
    new HtmlWebpackPlugin()

优化单独打包 runtime

module.exports={
  mode:mode
  ...
  optimization:{
    runtimeChunk:'single'  //运行时文件 单独打包
  }
  ...
}

splitChunks 将 node 依赖单独打包

...
module.exports={
    mode:mode
  ...
  optimization:{
        runtimeChunk:'single',  //运行时文件 单独打包
        splitChunks: {
        cacheGroups: {
          vendor: {
            minSize: 0,
                    /* 如果不写 0，由于 React 文件尺寸太小，会直接跳过 */
            test: /[\\/]node_modules[\\/]/, 
                    // 为了匹配 /node_modules/ 或 \node_modules\
            name: 'vendors', // 文件名
            chunks: 'all',  
                    // all 表示同步加载和异步加载，async 表示异步加载，initial 表示同步加载
            /*  这三行的整体意思就是把两种加载方式的来自
                            node_modules 目录的文件打包为 vendors.xxx.js其中 vendors 是第三方的意思
            */
          }
        },
    },  
    }
  ...
}
...

固定 moduleIds

...
module.exports={
    mode:mode
  ...
  optimization:{
    moduleIds:'deterministic',
        ...
    }
  ...
}
...

多页面

const HtmlWebpackPlugin = require('html-webpack-plugin')
...
module.exports={
  mode:mode,
  ...
  entry:{
    main:'./src/index.js',
    admin:'./src/admin.js'
  },
  plugins:[
    ...
    new HtmlWebpackPlugin({
        filename:'index.html', //index.html
      chunks:['main']
    }),   
    new HtmlWebpackPlugin({
        filename:'admin.html',
      chunks:['admin']       //引入的js
    })
  ].filter(Boolean),
  ...
  module:{
    ...
  }
}
...

优化 common 插件

...
module.exports={
    mode:mode
  ...
  optimization:{
        runtimeChunk:'single',  //运行时文件 单独打包
        splitChunks: {
        cacheGroups: {
          vendor: {
                    priority:10,//优先级
            minSize: 0,
                    /* 如果不写 0，由于 React 文件尺寸太小，会直接跳过 */
            test: /[\\/]node_modules[\\/]/, 
                    // 为了匹配 /node_modules/ 或 \node_modules\
            name: 'vendors', // 文件名
            chunks: 'all',  
                    // all 表示同步加载和异步加载，async 表示异步加载，initial 表示同步加载
            /*  这三行的整体意思就是把两种加载方式的来自
                            node_modules 目录的文件打包为 vendors.xxx.js其中 vendors 是第三方的意思
            */
          },
                common:{
                priority:5,//优先级
              minSize:0,
              minChunks:2,
              chunks:'all',
              name:'common'    
          }
        },
    },  
    }
  ...
}
...