16.webpack4生产环境配置

1）创建好webpack.config.js文件

2）配置entry,output配置项

3）进行loader配置：配置样式文件处理、配置js兼容

① 打包样式资源、处理css兼容、生成单独css文件、压缩css

     打包css

     打包less

涉及的依赖：

        mini-css-extract-plugin：mini-css-extract-plugin中的loader用于将js文件中的css字符串

        css-loader：用于将css文件转成字符串插入js文件中

        postcss-loader：用于处理css兼容问题

        less-loader：用于将less文件转为css文件

        提取成单独文件，在plugins中进行配置mini-css-extract-plugin对象，可以将输出的单独

        文件进行配置输出的css文件路径。并且各个loader引入是有顺序的

        使用optimize-css-assets-webpack-plugin进行压缩

② 打包并压缩html资源

涉及的插件：

        html-webpack-plugin：通过该配置项将打包后的js/css文件引入到指定需要复制的html

        文件中。并通过minify配置项对html文件进行压缩。

③打包图片、其它资源

涉及的依赖：

        file-loader：用于打包输出其它资源文件、作为url-loader使用的前提。

        url-loader：用作打包图片资源，并可以通过配置项对小于指定大小的图片进行base64

        压缩。

        html-loader：处理引入html中引入的图片资源，从而能被url-loader处理。

        

 ④引入eslint-loader统一开发规范（使用推荐的airbnb）

 涉及的依赖：

        eslint：作为使用eslint-loader的前提

        eslint-loader：对eslint进行配置，检查js语法规范

        eslint-config-airbnb-base：推荐使用的eslint代码规范

        eslint-plugin-import：使用的前提条件

⑤ 处理js兼容性问题（使用按需加载）、并进行js代码压缩

        babel：使用babel-loader的前提

        babel-loader：做js兼容

        @babel/preset-env：babel的预设，做基本兼容

        core-js：ie浏览器无法兼容es6语法，可以使用core-js进行兼容

        将mode改为production进行js代码压缩

3. 代码段

const { resolve } = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

const commonCssLoader = [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
        loader: "postcss-loader",
        options: {
            ident: "postcss",
            plugins: () => [require('postcss-preset-env')()]
        }
    }
]
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "js/built.js",
        path: resolve(__dirname, "build")
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [...commonCssLoader]
            },
            {
                test: /\.less$/,
                use: [...commonCssLoader, "less-loader"]
            },
            {
                test: /\.(jpeg|jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]',
                    esModule: false,
                    outputPath: 'imgs'
                }
            },
            {
                test: /\.html$/
                loader: 'html-loader'
            },
            {
                exclude: /\.(html|less|css|js|jpeg|jpg|png|gif)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'media'
                }
            },
            /*
                正常来讲，一个文件只能被一个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的版本
                                corejs: {
                                    version: 3
                                },
                                // 指定兼容性做到哪个版本浏览器
                                targets: {
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }   
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true
            }
        }),
        new MiniCssExtractPlugin({
            filename: "css/built.css"
        }),
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode: "production"
}