webpack 知识系列第三篇

Mark_Zoe
92 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

一、css 兼容性处理

  1. 创建文件

    image.png

  2. 下载 loader

    npm install --save-dev postcss-loader postcss-preset-env

  3. 修改配置文件

    const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 设置 nodejs 环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () => [
                                // postcss 的插件
                                require('postcss-preset-env')()
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/built.css'
            })
        ],
    mode: 'development'
};

  4. 修改 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"
    ]
}

  5. 运行指令: webpack

二、压缩 css

  1. 创建文件

    image.png

  2. 下载安装包

    npm install --save-dev optimize-css-assets-webpack-plugin

  3. 修改配置文件

    const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'
)
// 设置 nodejs 环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () => [
                                // postcss 的插件
                                require('postcss-preset-env')()
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
        template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
        filename: 'css/built.css'
    }),
        // 压缩 css
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode: 'development'
};

  4. 运行指令: webpack

三、js 语法检查

  1. 创建文件

    image.png

  2. 下载安装包

    npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

  3. 修改配置文件

    const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'
)
// 设置 nodejs 环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            /*
                语法检查： eslint-loader eslint
                注意：只检查自己写的源代码，第三方的库是不用检查的
                设置检查规则：
                package.json 中 eslintConfig 中设置~
                "eslintConfig": {
                    "extends": "airbnb-base"
                }
                airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
            */
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    // 自动修复 eslint 的错误
                    fix: true
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/built.css'
        }),
        // 压缩 css
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode: 'development'
};

  4. 配置 package.json

    "eslintConfig": {
    "extends": "airbnb-base",
    "env": {
        "browser": true
    }
}

  5. 运行指令: webpack

四、js 兼容性处理

  1. 创建文件

    image.png

  2. 下载安装包

    npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js

  3. 修改配置文件

    const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    // 预设：指示 babel 做怎么样的兼容性处理
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                // 按需加载
                                useBuiltIns: 'usage',
                                // 指定 core-js 版本
                                corejs: {
                                    version: 3
                                },
                                // 指定兼容性做到哪个版本浏览器
                                targets: {
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
};

  4. 运行指令: webpack

五、js 压缩

  1. 创建文件

    image.png

  2. 修改配置文件

    const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    // 生产环境下会自动压缩 js 代码
    mode: 'production'
};

  3. 运行指令: webpack

六、HTML 压缩

  1. 创建文件

    image.png

  2. 修改配置文件

    const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            // 压缩 html 代码
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true
            }
        })
    ],
    mode: 'production'
};

  3. 运行指令:webpack

七、总结

本篇主要介绍了webpack生产环境的基本配置，包括：提取css成单独文件、css兼容性处理、压缩css、js语法检查、js兼容性处理、js压缩、HTML压缩等。

avatar
文章
阅读
粉丝