webpack.config.js，package.json

webpack.config.js

// 定义项目根目录
const {resolve} = require('path');
// 引入html插件，使用模板，html压缩
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 提取单独css文件 替代 style-loader
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 定义nodejs环境变量，决定使用 browserslist 的哪个环境
process.env.NODE_ENV = 'development';

// 复用loader
const commonCssLoader = [
    // 'style-loader',
    // 提取单独css文件 替代 style-loader
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        // css 兼容处理,还需要再package.json中定义 browserslist
        loader: 'postcss-loader',
        options: {
            ident: 'postcss',
            plugins: () => {
                require('postcss-preset-env')()
            }
        }
    }
];

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/build.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    ...commonCssLoader
                ]
            },
            {
                // 执行顺序：
                // 1. 从下往上 less 通过 less-loader 编译成 css，
                // 2. 然后通过 破石头css-loader开始兼容处理，
                // 3. 通过 css-loader加到js中，
                // 4. 通过MiniCssExtractPlugin.loader 生成单独文件
                test: /\.less$/,
                use: [
                    ...commonCssLoader,
                    'less-loader'
                ]
            },

            /*
            * 正常： 一个文件只能被一个loader处理。
            * 当一个文件被多个loader处理，那么一定要制定loader执行的先后顺序
            * 先执行eslint，再执行babel
            * */
            // {
            //     // 在 package.json中 eslintConfig  --> airbnb
            //     test: /\.js$/,
            //     exclude: /node_modules/,
            //     // 优先执行
            //     enforce: 'pre',
            //     loader: 'eslint-loader',
            //     options: {
            //         fix: true
            //     }
            // },
            // {
            //     test: /\.js$/,
            //     exclude: /(node_modules)/,
            //     loader: 'babel-loader',
            //     options: {
            //         presets: [
            //             [
            //                 '@babel/preset-env',
            //                 {
            //                     useBuiltIns: 'usage',
            //                     corejs: {version: 3},
            //                     targets: {
            //                         chrome: '60',
            //                         firefox: '50'
            //                     }
            //
            //                 }
            //             ]
            //         ]
            //     }
            // },
            {
                // 图片
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]',
                    outputPath: 'imgs',
                    esModule: false
                },
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                // 其它文件
                exclude: /\.(js|css|less|html|jpg|png|gif)/,
                loader: 'file-loader',
                options: {
                    outputPath: 'media'
                }
            }
        ]
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            // html 压缩
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true
            }
        }),
        new MiniCssExtractPlugin({
            filename: 'css/build.css'
        }),
        // 压缩css
        new OptimizeCssAssetsWebpackPlugin()
    ],
    // 模式 development 开发， production 生产自动压缩js代码
    mode: 'development',
}

package.json

development:：开发环境兼容
production：生产环境兼容
eslintConfig：eslint配置

...

 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base"
  }