1. 通用

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const appTitle = '懒盘搜索聚合官网 - lzpan.com'
module.exports = {
    mode: "development",
    entry: path.resolve(__dirname, 'main.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "script.js",
        chunkFilename: "[name].chunk.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,//排除掉node_module目录
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'] //转码规则
                    }
                }
            },
            {
                test: /\.(scss|css)$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: appTitle,
            filename: 'index.html',
            template: path.resolve(__dirname, 'public/index.html')
        }),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, 'src/favicon'),
                    to: path.resolve(__dirname, 'dist')
                }
            ]
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            chunkFilename: 'css/[id].css',
        }),
    ]
}

2. 样式文件处理

1、提取css到单独文件

mini-css-extract-plugin

https://www.npmjs.com/package/mini-css-extract-plugin

插件中使用，以及再loader中使用即可！

new MiniCssExtractPlugin(),

2、补全css兼容性

postcss-loader 和 postcss-preset-env以及autoprefixer

yarn add postcss-loader postcss-preset-env autoprefixer -D

package.json中，添加：

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

然后添加一个Loader：

{
    loader: 'postcss-loader',
    options: {
        ident: 'postcss',
        plugins: () => [
            require('postcss-preset-env')(),
            require('autoprefixer')({
                overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']
                })
        ]
    }
}

整体css处理的loader:

{
    test: /\.css$/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                ident: 'postcss',
                plugins: () => [
                    require('postcss-preset-env')(),
                    require('autoprefixer')({
                        overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']
                    })
                ]
            }
        }
    ]
}

3、压缩css

Optimize CSS Assets Webpack Plugin

yarn add optimize-css-assets-webpack-plugin -D

插件中使用

const OptimizeCss = require('optimize-css-assets-webpack-plugin')
plugins: [
    new HtmlWebpackPlugin({
    // ...
    new OptimizeCss()
]

3. js文件处理

1、eslint语法检查

yarn add eslint eslint-loader -D

yarn add eslint-config-airbnb eslint-plugin-import -D

package.json:

"eslintConfig": {
  "extends": "airbnb-base"
}

2、兼容性处理

yarn add babel-loader @babel/cli @babel/core @babel/preset-env @babel/polyfill -D

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
        presets: [
            '@babel/preset-env'
        ]
    }
},

以上只是进行了基础的语法转换，更多需要使用polyfill和core-js

yarn add core-js -D

按需加载如下：

完整配置：

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
        presets: [
            [
                '@babel/preset-env',
                {
                    useBuiltIns: 'usage',
                    corejs: {
                        version: 3
                    },
                    targets: {
                        "chrome": '68',
                        "firefox": '60',
                        "ie": '10'
                    }
                }
            ]
        ]
    }

4. 压缩html,js

js默认先mode设置为production就会压缩，所以只需要设置html就行

利用html-webpack-plugin

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: path.resolve(__dirname, 'src/html/index.html'),
    minify: {
        collapseWhitespace: true,
        removeComments: true,
    }
}),

在设置html插件时，添加个属性：minify就行！