https://github.com/FrankFang/jprcb00x6ZsV

    1. const path = require('path')
    2. const mode = 'production'
    3. const ESLintPlugin = require('eslint-webpack-plugin')//自动进行eslint检查插件
    4. const MiniCssExtractPlugin = require('mini-css-extract-plugin')//单独提取css插件
    5. const HtmlWebpackPlugin = require('html-webpack-plugin')自动生成html插件
    7. const cssLoaders = (...loaders) => [
    8.   mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
    9.   {
    10.     loader: 'css-loader',
    11.     options: {
    12.       modules: {
    13.         compileType: 'icss',
    14.       },
    15.     },
    16.   },
    17.   ...loaders
    18. ]
    20. module.exports = {
    21.   mode,//模式
    22.   entry: {//入口
    23.     main: './src/index.js',
    24.     admin: './src/admin.js'
    25.   },
    26.   output: {//出口
    27.     filename: '[name].[contenthash].js'
    28.   },
    29.   plugins: [
    30.     new ESLintPlugin({
    31.       extensions: ['.js', '.jsx', '.ts', '.tsx'] // 不加 .jsx 就不会检查 jsx 文件了
    32.     }),
    33.     mode === 'production' && new MiniCssExtractPlugin({
    34.       filename: '[name].[contenthash].css'
    35.     }),
    36.     new HtmlWebpackPlugin({
    37.       filename: 'index.html',
    38.       chunks: ['main']
    39.     }),
    40.     new HtmlWebpackPlugin({
    41.       filename: 'admin.html',
    42.       chunks: ['admin']
    43.     })
    44.   ].filter(Boolean),
    45.   optimization: {//优化
    46.     moduleIds: 'deterministic',//固定模块id
    47.     runtimeChunk: 'single',//将与我们源代码无关的代码单独打包,避免如webpack配置修改导致需要
    48.     //更新整个文件
    49.     splitChunks: {//将node_module的代码单独打包为vendor
    50.       cacheGroups: {
    51.         vendor: {
    52.           priority: 10,
    53.           minSize: 0, /* 如果不写 0，由于 React 文件尺寸太小，会直接跳过 */
    54.           test: /[\\/]node_modules[\\/]/,
    55.           name: 'vendors', // 文件名
    56.           chunks: 'all',  // all 表示同步加载和异步加载，async 表示异步加载，initial 表示同步加载
    57.         },
    58.         common: {//将多个js共有代码单独打包为common
    59.           priority: 5,
    60.           minSize: 0,
    61.           minChunks: 2,
    62.           chunks: 'all',
    63.           name: 'common'
    64.         }
    65.       },
    66.     },
    67.   },
    68.   resolve: {
    69.     alias: {//别名
    70.       '@': path.resolve(__dirname, './src/')
    71.     }
    72.   },
    73.   module: {
    74.     rules: [
    75.       {
    76.         test: /\.styl(us)?$/i,
    77.         use: cssLoaders({
    78.           loader: 'stylus-loader',
    79.           options: {
    80.             stylusOptions: {//为每个文件自动引入下面的文件
    81.               import: [path.resolve(__dirname, 'src/stylus-vars.styl')]
    82.             }
    83.           },
    84.         }),
    85.       },
    86.       {
    87.         test: /\.[jt]sx?$/,
    88.         exclude: /node_modules/,
    89.         use: {
    90.           loader: 'babel-loader',
    91.           options: {
    92.             presets: [//规则
    93.               ['@babel/preset-env'],
    94.               ['@babel/preset-react', {runtime: 'classic'}],
    95.               ['@babel/preset-typescript']
    96.             ]
    97.           }
    98.         }
    99.       },
    100.       {
    101.         test: /\.s[ac]ss$/i,
    102.         use: cssLoaders(
    103.           {
    104.             loader: 'sass-loader',
    105.             options: {
    106.               additionalData: `//为每个文件自动引入下面的文件
    107.                 @import "src/scss-vars.scss";
    108.               `,
    109.               sassOptions: {
    110.                 includePaths: [__dirname]//到对应路径上找
    111.               },
    112.             },
    113.           },
    114.         ),
    115.       },
    116.     ]
    117.   }
    118. }