webpack重新配置

const { resolve } = require("path")
const MiniCssExtractPlugin = require('mini-css-extract-plugin')//分离css文件

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { options } = require("less")
//决定使用哪个环境
process.env.NODE_ENV = 'production'
//复用loader
const commonCssLoader = [
    {
        loader: MiniCssExtractPlugin.loader,
        options: {
            publicPath: '../'
        }
    },
    'css-loader', {
        //还需要在package.json中配置需要做到哪方面的浏览器
        loader: 'postcss-loader',
        options: {

            postcssOptions: {
                ident: 'postcss',
                plugins: () => [
                    require('postcss-preset-env')()
                ]
            }

        }
    }]
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: commonCssLoader
            },
            {
                test: /\.less$/,
                use: [...commonCssLoader, 'less-loader']
            },
            //正常来讲，一个文件只能被一个loader处理
            //当一个文件要被多个loader处理,那么一定要指定loader执行的先后顺序：
            //先执行eslint，再执行babel
            // {
            //     //语法检查
            //     test: /\.js$/,
            //     exclude: /node_modules/,
            //     loader: 'eslint-loader',
            //     enforce: 'pre',
            //     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: '[name].[ext]',
                    outputPath: 'imgs',
                    esModule: false,  //关掉es6解析

                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader',
                options: {
                    esModule: false
                }
            },
            // {
            //     exclude: /\.(js|css|less|html|jpg|png|gif)$/,
            //     loader: 'file-loader',
            //     options: {
            //         outputPath: 'others',
            //         name: '[hash:10].[ext]'
            //     }
            // }
        ]
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/built.css'
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        })
    ],
    mode: 'production'

}

注意：在html中不用再次引入script的js文件，否则就会(ReferenceError: document is not defined)