webpack5 基础知识篇

翟棋

2023-12-01

一级目录

二级目录

三级目录

一、webpack是什么？

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

四个核心概念

入口(entry)
输出(output)
loader
插件(plugins)

在这里对webpack的四个核心概念就不做多余的描述，详情课参考官网：https://www.webpackjs.com/concepts/

二、webpack 安装

npm init -y
npm install webpack webpack-cli -g 
npm install webpack webpack-cli -D

三、配置文件基本配置

3.1 配置文件基本内容

新建一个mywebapck文件夹
- js 里面装index.js文件
- webpack.config.js 内容配置文件

配置内容如下：

const path = require('path');    //处理路径

const config = {
    entry:'./src/js/index.js',    //入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),    //出口路径配置
        filename: 'js/dist.js'       //出口文件名
    },
    module: {      //配置loader
        rules: [

        ]
    },
    plugins:[      //plugins配置

    ],
    mode:'development'     //开发环境模式
};

module.exports = config;

在mywebpack目录下执行webpack 命令就可以看见多出来的dist文件夹

3.2 打包html文件资源

安装 html-webpack-plugin 包

在mywebpack文件夹下创建index.html文件

引入html-webpack-plugin并在plugins配置中写上如下代码：

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装


plugins:[
    new HtmlWebpackPlugin({
        template : './src/index.html'
    })
]

运行webpack指令

3.3 打包css资源

npm i mini-css-extract-plugin css-loader style-loader

注意：不同文件必须配置不同的loader 处理,若是less文件，则还需要安装less-loader less

修改配置文件：

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const config = {
    entry:'./src/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/dist.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ],

            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template : './src/index.html'
        }),
        // 使用单独生成css文件的插件，打包时会将css文件独立出去
        new MiniCssExtractPlugin({
            // 指定文件的输出路径和文件名
            filename: 'css/index.css'
        })
    ],
    mode:'development'
};

module.exports = config;

3.4 打包图片资源

npm i html-loader -D

在module中添加如下代码

{
    //打包图片资源  处理 css 文件的 img背景 图片
    test:/\.(jpg|png|gif)$/,
    type: 'asset/resource',
    generator:{
        filename:'img/[hash:10][ext]',

    },

},
{
    // 处理 html 文件的 img 图片
    test:/\.html$/,
    loader:'html-loader',
},

3.4 打包字体资源

{
    //打包图标字体资源
    test: /\.(ttf|eof|woff2)$/,
    type: 'asset/resource',
    generator:{
        filename:'font/[hash:10][ext]',
    },
}

3.5 打包其它资源

{
    //打包图标字体资源
    exclude: /\.(ttf|eof|woff2|css|html|js|png|gif|jpg)$/,
    type: 'asset/resource',
    generator:{
        filename:'other/[hash:10][ext]',
    }
}

3.6 热更新 devServer

注意：devServer选项和plugins，mode平级

devServer: {
   //热加载   npx webpack server
   static: {
       directory: path.join(__dirname, 'dist'),
   },
   compress: true,
   port: 9000,
   open: true
},

当运行npx webpack server的时候，devServer首先会在内存中创建类似的dist目录，在由浏览器打开进行预览。

四、兼容性处理以及压缩

4.1 css兼容性处理

nom i postcss-loader postcss-preset-env -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"
	 ]
	}

在rules中添加如下

{
    //打包css文件
    test: /\.css$/,
    use: [

        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        [
                            "postcss-preset-env",
                            {}
                        ],
                    ],
                },
            }
        }

    ]
},

如是开发环境，还需要在最外面添加
// 设置nodejs环境变量
process.env.NODE_ENV = ‘development’;

4.2 压缩 css

npm install css-minimizer-webpack-plugin --save-dev

注意： optimizationz 选项和plugins，mode等平级

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); 

optimization: {
    //这将使CSS优化只在生产模式。
    // 如果你想在开发中运行它，设置优化。最小化选项为true:
    minimizer: [
        new CssMinimizerPlugin(),

    ],
    minimize: true,
},

4.3 js语法检测

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

在package.json中配置

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

在plugins中添加：

const ESLintPlugin = require('eslint-webpack-plugin');


 new ESLintPlugin(
    {
        extensions: ['js'],

        context: path.resolve('src'),

        exclude: '/node_modules',

        fix: true
    }
)

4.4 js兼容处理

npm install -D babel-loader @babel/core @babel/preset-env core-js


//在rules中配置

{
   test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: [
                [
                    '@babel/preset-env',
                    {
                        // 按需加载
                        useBuiltIns: 'usage',
                        // 指定core-js版本
                        corejs: {
                            version: 3
                        },
                        // 指定兼容性做到哪个版本浏览器
                        targets: {
                            chrome: '60',
                            firefox: '60',
                            ie: '9',
                            safari: '10',
                            edge: '17'
                        }
                    }
                ]

            ]
        }
    }

},

4.5 js压缩

模式直接变为生产环境就是压缩

mode:'production'

4.5 HTML压缩

//HtmlWebpackPlugin中添加

new HtmlWebpackPlugin({
   template : './src/index.html',
    // 压缩html代码
    minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true
    }
}),

五、总结

汇总以上知识点，完整代码为：

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const ESLintPlugin = require('eslint-webpack-plugin');


// 设置nodejs环境变量
process.env.NODE_ENV = 'development';
const config = {
    entry:'./src/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/dist.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        "postcss-preset-env",
                                        {}
                                    ],
                                ],
                            },
                        }
                    }
                ],

            },
            {
                //打包图片资源  处理 css 文件的 img背景 图片
                test:/\.(jpg|png|gif)$/,
                type: 'asset/resource',
                generator:{
                    filename:'img/[hash:10][ext]',

                },

            },
            {
                // 处理 html 文件的 img 图片
                test:/\.html$/,
                loader:'html-loader',
            },
            {
                //打包图标字体资源
                test: /\.(ttf|eof|woff2)$/,
                type: 'asset/resource',
                generator:{
                    filename:'font/[hash:10][ext]',
                },
            },
            {
                //打包图标字体资源
                exclude: /\.(ttf|eof|woff2|css|html|js|png|gif|jpg)$/,
                type: 'asset/resource',
                generator:{
                    filename:'other/[hash:10][ext]',
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        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',
            // 压缩html代码
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true
            }
        }),
        // 使用单独生成css文件的插件，打包时会将css文件独立出去
        new MiniCssExtractPlugin({
            // 指定文件的输出路径和文件名
            filename: 'css/index.css'
        }),
        new ESLintPlugin(
            //语法检测
            {
                extensions: ['js'],

                context: path.resolve('src'),

                exclude: '/node_modules',

                fix: true
            }
        )
    ],
    optimization: {
        //这将使CSS优化只在生产模式。
        // 如果你想在开发中运行它，设置优化。最小化选项为true:
        minimizer: [
            new CssMinimizerPlugin(),

        ],
        minimize: true,
    },
    mode:'development',
    devServer: {
        //热加载   npx webpack server
        static: {
            directory: path.join(__dirname, 'build'),
        },
        compress: true,
        port: 9000,
        open: true
    }
};

module.exports = config;

以上笔记参照了尚硅谷视频讲解、官方网站、其他博客，若有不足或者错误的地方，麻烦各位老铁指点出来