webpack5

webpack是一款打包工具,默认只处理js文件,其他类型资源需要使用loader或plugin去处理。

1、webpack5 准备工作

官网

中文

安装教程
推荐使用本地项目安装,尽量不安装全局的。

1_1、0配置打包

项目:project/src/index.js

写入任意js代码

然后初始化:project/根目录下启动cmd窗口,输入npm init -y

同cmd创建继续输入yarn add webpack webpack-cli

同cmd里输入打包命令:npx webpack

打包完毕后,project/目录下会产生一个dist/main.js

2、打包样式资源

创建webpack.config.js文件(配置文件)
loader中use数组中顺序执行:从右到左,从上到下

// webpack.config.js
const {resolve} = require('path');
 
module.exports = {
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
        rules:[
            {
                //匹配哪些文件
                test:/\.less/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
        ]
    },
    // 模式
    mode:'development'
}

3、打包html资源

plugins:下载,引入,使用

loader:下载,使用

后面的配置亦如此

// webpack.config.js
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    plugins:[
        new HtmlWebpackPlugin({
            // 复制一个html文件,并引入
            template:'./src/index.html'
        })
    ],
    // 模式
    mode:'development'
}

4、打包图片资源

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build'),
        // 图片需要使用公共路径
        publicPath: "./"
    },
    // loader的配置
    module:{
        rules:[
            {
                //匹配哪些文件
                test:/\.less/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                // 处理图片资源,但是处理不了html中img的路径问题
                test: /\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    limit: 8* 1024,
                    // 关闭es6
                    esModule:false,
                    name:'[hash:10].[ext]' //不重复名字
                },
            },
            {
                // 处理html中的img
                test: /\.html$/,
                loader:'html-loader'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            // 复制一个html文件,并引入
            template:'./src/index.html'
        })
    ],
    // 模式
    mode:'development'
}

5、打包其他资源

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
        rules:[
 
            {
                //匹配哪些文件
                test:/\.less/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                // 处理图片资源,但是处理不了html中img的路径问题
                test: /\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    limit: 8* 1024,
                    // 关闭es6
                    esModule:false,
                    name:'[hash:10].[ext]' //不重复名字
                },
            },
            {
                // 处理html中的img
                test: /\.html$/,
                loader:'html-loader'
            },
            {
                // 打包其他资源
                exclude: /\.(css|js|html)$/,
                loader: 'file-loader'
            }
        ]
 
 
    },
    plugins:[
        new HtmlWebpackPlugin({
            // 复制一个html文件,并引入
            template:'./src/index.html'
        })
    ],
    // 模式
    mode:'development'
}

6、devServer开启服务

  • 自动打包运行
  • 指令:npx webpack-dev-server
  • package.json/scripts:{"serve": "webpack serve --config webpack.config.js"}
      const {resolve} = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = {
        // 入口
        entry:'./src/index.js',
        // 输出
        output:{
            // 输出文件名
            filename:'built.js',
            //输出路径
            path:resolve(__dirname,'build')
        },
        // loader的配置
        module:{
            rules:[
                {
                    //匹配哪些文件
                    test:/\.css/,
                    //使用哪些loader进行处理
                    use:[
                        'style-loader',
                        'css-loader',
                        'less-loader'
                    ]
                },
                {
                    // 处理html中的img
                    test: /\.html$/,
                    loader:'html-loader'
                }
            ]
     
     
        },
        plugins:[
            new HtmlWebpackPlugin({
                // 复制一个html文件,并引入
                template:'./src/index.html'
            })
        ],
     
        // 自动打包运行
        // 指令:npx webpack-dev-server
        devServer: {
            contentBase: resolve(__dirname,'build'),
            compress:true,
            port:3000,
            open:true
        },
        // 模式
        mode:'development'
    }

7、提取css成单独文件

  • 用到mini-css-extract-plugin插件
  • 并且将style-loader 改为 MiniCssExtractPlugin.loader
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
        rules:[
            {
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ]
            },
            {
                // 处理html中的img
                test: /\.html$/,
                loader:'html-loader'
            }
        ]
 
 
    },
    plugins:[
        new HtmlWebpackPlugin({
            // 复制一个html文件,并引入
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin()
    ],
 
    // 自动打包运行
    // 指令:npx webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true
    },
    // 模式
    mode:'development'
}

8、css兼容

package.json增加

// package.json
"browserslist": {
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ],
  "production": [
    ">0.1%",
    "not dead",
    "not op_mini all"
  ]
}
// webpack.config.js
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/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
        rules:[
            {
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader",
                        options:{
                            ident:'postcss',
                            plugins:()=>{
                                require('postcss-preset-env')()
                            }
                        }
                    }
                ]
            },
            {
                // 处理html中的img
                test: /\.html$/,
                loader:'html-loader'
            }
        ]
 
 
    },
    plugins:[
        new HtmlWebpackPlugin({
            // 复制一个html文件,并引入
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin()
    ],
 
    // 自动打包运行
    // 指令:npx webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true
    },
    // 模式
    mode:'development'
}

9、css压缩

  • const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)
    // webpack.config.js
    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/index.js',
        // 输出
        output:{
            // 输出文件名
            filename:'built.js',
            //输出路径
            path:resolve(__dirname,'build')
        },
        // loader的配置
        module:{
            rules:[
                {
                    //匹配哪些文件
                    test:/\.css/,
                    //使用哪些loader进行处理
                    use:[
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        {
                            loader: "postcss-loader",
                            options:{
                                ident:'postcss',
                                plugins:()=>{
                                    require('postcss-preset-env')()
                                }
                            }
                        }
                    ]
                },
                {
                    // 处理html中的img
                    test: /\.html$/,
                    loader:'html-loader'
                }
            ]
     
     
        },
        plugins:[
            new HtmlWebpackPlugin({
                // 复制一个html文件,并引入
                template:'./src/index.html'
            }),
            new MiniCssExtractPlugin(),
            new OptimizeCssAssetsWebpackPlugin()
        ],
     
        // 自动打包运行
        // 指令:npx webpack-dev-server
        devServer: {
            contentBase: resolve(__dirname,'build'),
            compress:true,
            port:3000,
            open:true
        },
        // 模式
        mode:'development'
    }

10、eslint 语法检查

  • 【beCareful】:不检查第三方 node_module
  • yarn add eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import
// package.json
  "eslintConfig": {
    "extends": "airbnb-base"
  }
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/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
        rules:[
            {
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader",
                        options:{
                            ident:'postcss',
                            plugins:()=>{
                                require('postcss-preset-env')()
                            }
                        }
                    }
                ]
            },
            {
                // 处理html中的img
                test: /\.html$/,
                loader:'html-loader'
            },
            // {
            //     test:/\.js$/,
            //     exclude:/node_modules/,
            //     loader:'eslint-loader',
            //     options:{
            //         fix:true
            //     }
            // }
        ]
 
 
    },
    plugins:[
        new HtmlWebpackPlugin({
            // 复制一个html文件,并引入
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin(),
        new OptimizeCssAssetsWebpackPlugin()
    ],
 
    // 自动打包运行
    // 指令:npx webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true
    },
    // 模式
    mode:'development'
}

11、压缩代码

【js,html压缩只要将mode改为production就会自动压缩】

12、开发性能提升:HMR:热模块替换

  • 在devServer中启动hot:true
  • css默认启动hmr因为style-loader内部启动了
  • js:需要在js中添加
    // index.js
    if (module.hot){
        module.hot.accept('./print.js',function () {
            print();
        })
    }

    13、开发性能提升:source-map

    映射代码,调试文件
    devtool: "source-map"
    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/index.js',
        // 输出
        output:{
            // 输出文件名
            filename:'built.js',
            //输出路径
            path:resolve(__dirname,'build')
        },
        // loader的配置
        module:{
            rules:[
                {
                    //匹配哪些文件
                    test:/\.css/,
                    //使用哪些loader进行处理
                    use:[
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        {
                            loader: "postcss-loader",
                            options:{
                                ident:'postcss',
                                plugins:()=>{
                                    require('postcss-preset-env')()
                                }
                            }
                        }
                    ]
                },
                {
                    // 处理html中的img
                    test: /\.html$/,
                    loader:'html-loader'
                }
            ]
     
     
        },
        plugins:[
            new HtmlWebpackPlugin({
                // 复制一个html文件,并引入
                template:'./src/index.html'
            }),
            new MiniCssExtractPlugin(),
            new OptimizeCssAssetsWebpackPlugin()
        ],
     
        // 自动打包运行
        // 指令:npx webpack-dev-server
        devServer: {
            contentBase: resolve(__dirname,'build'),
            compress:true,
            port:3000,
            open:true
        },
        devtool: "source-map",
        // 模式
        mode:'development'
    }

    14、生产性能提升:tree-shaking(去除没用到的代码)

    1. 必须es6模块化
    1. 开启生产环境
    1. 在package.json中配置
      // package.json
      "sideEffects":["*.css"]



如果你遇到了前端难题,或者需要一对一帮扶服务,请到淘宝搜索店铺:前端在线或扫下面二维码

  转载规则


《webpack5》宋宇采用知识共享署名 4.0 国际许可协议进行许可。
 上一篇
8个非常实用的Vue自定义指令8个非常实用的Vue自定义指令
在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。 Vue 自定义指令有全局注册和局部注册两种方式。先来看
2020-12-20
下一篇 
B站视频转换器B站视频转换器
使用 python3.7+pyqt 开发的 B 站视频转换器。 【特别声明!】没有恶意破坏或非正常手段获取 B 站视频。详细介绍在我的老博客里下载地址
2020-12-06
  目录