1. const { resolve } = require('path')
    2. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    3. const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
    4. const HtmlWebpackPlugin = require('html-webpack-plugin');
    7. //定义nodejs环境变量：决定使用browserslist的哪个环境
    8. process.env.NODE_ENV = 'production'
    10. //复用loader
    11. const commonCssLoader = [
    12.     MiniCssExtractPlugin.loader,
    13.     'css-loader',
    14.     {
    15.         //还需要在package.json中定义browserslist
    16.         loader: 'postcss-loader',
    17.         options: {
    18.             ident: 'postcss',
    19.             plugins: () => [
    20.                 require('postcss-preset-env')()
    21.             ],
    23.         }
    24.     }
    25. ]
    27. module.exports = {
    28.     entry: './src/js/index.js',
    29.     output: {
    30.         filename: 'js/built.js',
    31.         path: resolve(__dirname, 'build'),
    32.         // publicPath: 'build'
    33.     },
    34.     module: {
    35.         rules: [
    36.             {
    37.                 //在package.json中eslintConfig --> airbnb
    38.                 test: /\.js$/,
    39.                 exclude: /node_modules/,
    40.                 //优先执行
    41.                 enforce: 'pre',
    42.                 loader: 'eslint-loader',
    43.                 options: {
    44.                     fix: true
    45.                 }
    46.             },
    47.             {
    48.                 //以下loader只会匹配一个
    49.                 //注意：不能有两个配置 处理同一个文件
    50.                 oneOf: [
    51.                     {
    52.                         test: /\.css$/,
    53.                         use: [...commonCssLoader],
    54.                     },
    55.                     {
    56.                         test: /\.less$/,
    57.                         use: [...commonCssLoader, 'less-loader']
    58.                     },
    59.                     /**
    60.                      * 正常来讲，一个文件只能被一个loader处理
    61.                      * 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
    62.                      * 先执行eslint 再执行babel
    63.                      */
    65.                     {
    66.                         test: /\.js$/,
    67.                         exclude: /node_modules/,
    68.                         loader: 'babel-loader',
    69.                         options: {
    70.                             presets: [
    71.                                 [
    72.                                     '@babel/preset-env',
    73.                                     {
    74.                                         //按需加载
    75.                                         useBuiltIns: 'usage',
    76.                                         //指定core-js版本
    77.                                         corejs: {
    78.                                             version: 3
    79.                                         },
    80.                                         targets: {
    81.                                             chrome: '60',
    82.                                             firefox: '60',
    83.                                             ie: '9',
    84.                                             safari: '10',
    85.                                             edge: '17'
    86.                                         }
    87.                                     }
    88.                                 ]
    89.                             ]
    90.                         }
    91.                     },
    92.                     {
    93.                         test: /\.(jpg|png|gif)/,
    94.                         loader: 'url-loader',
    95.                         options: {
    96.                             limit: 8 * 1024,
    97.                             name: '[hash:10].[ext]',
    98.                             outputPath: '../imgs',
    99.                             esModule: false,
    101.                         }
    102.                     },
    103.                     {
    104.                         test: /\.html$/,
    105.                         loader: 'html-loader'
    106.                     },
    107.                     {
    108.                         exclude: /\.(js|css|less|html|jpg|png|gif)/,
    109.                         loader: 'file-loader',
    110.                         options: {
    111.                             outputPath: 'media',
    113.                         }
    114.                     }
    116.                 ]
    117.             }
    119.         ]
    120.     },
    121.     plugins: [
    122.         new MiniCssExtractPlugin({
    123.             filename: 'css/built.css'
    124.         }),
    125.         new OptimizeCssAssetsWebpackPlugin(),
    126.         new HtmlWebpackPlugin({
    127.             template: './src/index.html',
    128.             minify: {
    129.                 collapseWhitespace: true,
    130.                 removeComments: true
    131.             }
    132.         })
    133.     ],
    134.     mode: 'production'
    135. }