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');
    6. // 定义nodejs环境变量：决定使用browserslist的哪个环境
    7. process.env.NODE_ENV = 'production';
    9. // 复用loader
    10. const commonCssLoader = [
    11.   MiniCssExtractPlugin.loader,
    12.   'css-loader',
    13.   {
    14.     // 还需要在package.json中定义browserslist
    15.     loader: 'postcss-loader',
    16.     options: {
    17.       ident: 'postcss',
    18.       plugins: () => [require('postcss-preset-env')()]
    19.     }
    20.   }
    21. ];
    23. module.exports = {
    24.   entry: './src/js/index.js',
    25.   output: {
    26.     filename: 'js/built.js',
    27.     path: resolve(__dirname, 'build')
    28.   },
    29.   module: {
    30.     rules: [
    31.       {
    32.         test: /\.css$/,
    33.         use: [...commonCssLoader]
    34.       },
    35.       {
    36.         test: /\.less$/,
    37.         use: [...commonCssLoader, 'less-loader']
    38.       },
    39.       /*
    40.         正常来讲，一个文件只能被一个loader处理。
    41.         当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
    42.           先执行eslint 在执行babel
    43.       */
    44.       {
    45.         // 在package.json中eslintConfig --> airbnb
    46.         test: /\.js$/,
    47.         exclude: /node_modules/,
    48.         // 优先执行
    49.         enforce: 'pre',
    50.         loader: 'eslint-loader',
    51.         options: {
    52.           fix: true
    53.         }
    54.       },
    55.       {
    56.         test: /\.js$/,
    57.         exclude: /node_modules/,
    58.         loader: 'babel-loader',
    59.         options: {
    60.           presets: [
    61.             [
    62.               '@babel/preset-env',
    63.               {
    64.                 useBuiltIns: 'usage',
    65.                 corejs: {version: 3},
    66.                 targets: {
    67.                   chrome: '60',
    68.                   firefox: '50'
    69.                 }
    70.               }
    71.             ]
    72.           ]
    73.         }
    74.       },
    75.       {
    76.         test: /\.(jpg|png|gif)/,
    77.         loader: 'url-loader',
    78.         options: {
    79.           limit: 8 * 1024,
    80.           name: '[hash:10].[ext]',
    81.           outputPath: 'imgs',
    82.           esModule: false
    83.         }
    84.       },
    85.       {
    86.         test: /\.html$/,
    87.         loader: 'html-loader'
    88.       },
    89.       {
    90.         exclude: /\.(js|css|less|html|jpg|png|gif)/,
    91.         loader: 'file-loader',
    92.         options: {
    93.           outputPath: 'media'
    94.         }
    95.       }
    96.     ]
    97.   },
    98.   plugins: [
    99.     new MiniCssExtractPlugin({
    100.       filename: 'css/built.css'
    101.     }),
    102.     new OptimizeCssAssetsWebpackPlugin(),
    103.     new HtmlWebpackPlugin({
    104.       template: './src/index.html',
    105.       minify: {
    106.         collapseWhitespace: true,
    107.         removeComments: true
    108.       }
    109.     })
    110.   ],
    111.   mode: 'production'
    112. };