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.        * css处理 
    33.        */
    34.       {
    35.         test: /\.css$/,
    36.         use: [...commonCssLoader]
    37.       },
    38.       {
    39.         test: /\.less$/,
    40.         use: [...commonCssLoader, 'less-loader']
    41.       },
    42.       /**
    43.        * 正常来讲，一个文件只能被一个loader处理。
    44.        * 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
    45.        *   先执行eslint 在执行babel
    46.        */
    47.       {
    48.         // 在package.json中eslintConfig --> airbnb
    49.         test: /\.js$/,
    50.         exclude: /node_modules/,
    51.         enforce: 'pre', // 优先执行
    52.         loader: 'eslint-loader',
    53.         options: {
    54.           fix: true // 自动修复
    55.         }
    56.       },
    57.       {
    58.         // js兼容性处理
    59.         test: /\.js$/,
    60.         exclude: /node_modules/,
    61.         loader: 'babel-loader',
    62.         options: {
    63.           presets: [
    64.             [
    65.               '@babel/preset-env',
    66.               {
    67.                 useBuiltIns: 'usage',
    68.                 corejs: {version: 3},
    69.                 targets: {
    70.                   chrome: '60',
    71.                   firefox: '50'
    72.                 }
    73.               }
    74.             ]
    75.           ]
    76.         }
    77.       },
    78.       /**
    79.        * 处理图片
    80.        */
    81.       {
    82.         test: /\.(jpg|png|gif)/,
    83.         loader: 'url-loader',
    84.         options: {
    85.           limit: 8 * 1024,
    86.           name: '[hash:10].[ext]',
    87.           outputPath: 'imgs', // 输出路径
    88.           esModule: false
    89.         }
    90.       },
    91.       {
    92.         // 处理html中的图片
    93.         test: /\.html$/,
    94.         loader: 'html-loader' // 使用html-loader必须将url-loader中的esModules: false
    95.       },
    96.       {
    97.         exclude: /\.(js|css|less|html|jpg|png|gif)/,
    98.         loader: 'file-loader',
    99.         options: {
    100.           outputPath: 'media'
    101.         }
    102.       }
    103.     ]
    104.   },
    105.   plugins: [
    106.     new MiniCssExtractPlugin({
    107.       filename: 'css/built.css'
    108.     }),
    109.     new OptimizeCssAssetsWebpackPlugin(),
    110.     new HtmlWebpackPlugin({
    111.       template: './src/index.html', // 执行html模板创建新的html文件(打包后的html文件)
    112.       minify: { // html压缩
    113.         collapseWhitespace: true, // 去除空行,空格
    114.         removeComments: true // 去除注释
    115.       }
    116.     })
    117.   ],
    118.   mode: 'production'
    119. };