webpack配置生产环境

一、css配置处理

• css代码提取

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-pluagin');

//npm install html-webpack-pluagin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exprots = {
    entry: './src/index.js',
    output: {
        filename: 'js/bundle.js',
        path: resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: '/\.css$/',
                use: [
                /** 取代style-loader，提取js中css为单独文件 */
                    MiniCssExtractPlugin.loader, 
                    'css-loader'
                ]
            }
        ],
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            }),
            new MiniCssExtractPlugin({
                filename: './css/bulid.css'
            })
        ],
    }
    
    mode: 'production'
}

• css兼容处理

// 配置node环境变量
process.env.NODE_ENV = production

//提取css和less相同部分
const comentCss = [
    MiniCssExtractPlugin.loader, 
    'css-loader',
    // css兼容处理方法
    //npm install postcss  postcss-loader  postcss-preset-env -D
    //postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
    {
        loader: 'postcss-loader',
        ident: 'postcss',
        plugins: () => [
            require('postcss-preset-env')()
        ]
    }
]

module: {
    rules: [
        {
            test: '/\.css$/',
            use: [...comentCss]
        },
        {
            test: /\.less$/,
            use: [...comentCss, 'less-loader']
        }
    ]
}


/** package.json */
{
    "browserslist": {
         // 开发环境 设置node环境变量：process.env.NODE_ENV = development
         development: [
             "last 1 chrome version",
             "last 1 firefox version",
             "last 1 safari version"
         ],
         // 生产环境 设置node环境变量：process.env.NODE_ENV = production
         production: [
             ">0.2%".
             "not dead",
             "not op_mini all"
         ]
    }
}

• css 代码压缩

// 引入插件对css进行压缩 npm install optimize-css-assets-webpack-plugin -D
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

module.exporets = {
    module: {
        plugins: [
            new OptimizeCssAssetsWebpackPlugin();
        ]
    }
    
}

二、JS配置处理

• 语法检查

module.exports = {
    entry: '',
    output: {
        filename: '',
        path: resolve(__dirname, '')
    },
    module: {
        rules: [
            // npm install eslint eslint-loader
            //检查规则参考 airbnb --> eslint-config-airbnb-base  eslint-plugin-import eslint
            {
                test: '/\.js$/',
                exclude: '/node_modules/',
                loader: 'eslint-loader',
                options: {
                    fix: true
                }
            }
        ],
        plugins: []
    },
    mode: 'production'
}

// package.json 配置
{
    "eslintConfig": {
        "extends": "airbnb-base"
    }
}

• 兼容性处理

const { resolve } = require('path');
module.exports = {
    entry: '',
    output: {
        filename: '',
        path: resolve(__dirname, '')
    },
    module: {
        rules: [
            // js兼容性处理：babel-loader @babel/core
            // 1. 基本js兼容性处理 --> @babel/preset-env 只能处理语法 Promise不能处理
            // 2. 全部js兼容性处理 --> @babel/polyfill   体积大，对性能不友好
            // 3. 需要做兼容性处理的就做：按需加载  --> core-js
            {
                test: /\.js$/,
                exclude: /\.node_modules/,
                loader: 'babel-loader',
                options: [
                    preset: [
                        '@babel/preset-env',
                        // 按需加载
                        useBuiltIns: 'usage',
                        corejs: {
                            // corejs 版本
                            version: 3,
                            // 兼容浏览器版本
                            targets: {
                                chrome: '',
                                firefox: '',
                                ie: '',
                                safari: '',
                                edge: ''
                            }
                        }
                    ]
                ]
            }
        ],
        plugin: []
    },
    mode: 'production'
}

• js 压缩

module.exports = {
    // 生产模式自动压缩
    mode: 'production'
}

三、处理HTML

• html 压缩

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    module: {
        rules: [],
        plugins: [
            new HtmlWebpackPlugin({
                filename: './src/index.html',
                // 压缩html
                minify: {
                    // 移除空格
                    collapseWhitespace: true,
                    // 移除注释
                    removeComments： true
                }
            })
        ],
    }
}