webpack4.x—5.x

作者: 致自己_cb38 | 来源:发表于2022-02-09 14:19 被阅读0次

一、资源

官网
 腾讯云
 中文文档1
中文文档2
中文文档3
npm
教程1
教程2
教程3最新且最少
 教程4结合vue使用

二、安装

npm init

// 全局安装
npm i webpack webpack-cli -g

// 项目安装
npm i webpack webpack-cli -D

三、教程

打包命令
在package.json配置

webpack：有输出
webpack-dev-server：只会在内存中编译打包，不会有任何输出（不会输出dist文件）

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config webpack.config.js"
}

image.png

结论

image.png

entry入口

image.png
output出口

image.png
多页面应用
module

image.png
resolve

image.png
optimization，代码分割

image.png
打包css、less、sass

npm i css-loader style-loader -D
npm i less less-loader -D
npm i sass sass-loader -D

// loader的配置
module: {
        // 匹配哪些文件，不同文件必须配置不同loader处理
        rules: [
            {
                test: /\.css$/,
                // 执行顺序：从右到左，从下到上
                // 创建style标签， 将js中的样式资源插入进行，添加到head中生效
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.less$/,
                // 将less文件编译成css文件
                use: ["style-loader", "css-loader", "less-loader"],
            },
                        {
                test: /\.sass$/,
                // 将sass文件编译成css文件
                use: ["style-loader", "css-loader", "sass-loader"],
            }
        ],
}

打包html

npm i html-webpack-plugin -D

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

// plugin的配置
plugins: [
        // 默认创建一个空的html文件，自动引入打包输出的所有资源（js/css）
        new HtmlWebpackPlugin({
            // 复制"./src/index.html"（未引入任何资源），自动引入打包输出的所有资源（js/css）
            template: "./src/index.html",
        }),
]

打包图片
404：https://www.cnblogs.com/sea-breeze/p/11310856.html
https://www.cnblogs.com/sea-breeze/p/11310856.html
https://cli.vuejs.org/zh/config/#vue-config-js

npm i url-loader file-loader -D
npm i html-loader -D

{
                // 默认无法处理html里的img图片
                test: /\.(jpg|png|gif)$/,
                // 将less文件编译成css文件
                loader: "url-loader",
                options: {
                    // 图片大小小于8kb，会被base64处理
                    // 优点：减少请求数量（减轻服务器压力）
                    // 缺点：图片体积会更大（文件请求速度更慢）
                    limit: 8 * 1024,
                    // esModule: false,
                    // 给图片进行重命名
                    // [hash:10]取图片的hash前10位
                    // [ext]取文件原来扩展名
                    // 807de55529.jpg
                    name: "[hash:10].[ext]",
                },
},
{
                // 处理html里的img图片，负责引入html，从而能被url-loader处理
                test: /\.html$/,
                loader: "html-loader",
}

image.png

打包其他资源，如字体图标

npm i file-loader -D

{
                // 打包除了html|css|js|less以外的资源
                exclude: /\.(html|css|js|less|jpg)$/,
                loader: "file-loader",
                options: {
                    name: "[hash:10].[ext]",
                },
}

devServer，用于开发环境，跨域，模拟数据

image.png

npm i webpack-dev-server -D
启动：npx webpack-dev-server

// 自动化 如自动编译、热更新等，只会在内存中编译打包，不会有任何输出（不会输出dist文件）
devServer: {
        // 运行项目的目录(构建后)
        contentBase: path.resolve(__dirname, "dist"),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open: true,
}

输出不同文件

// js
output: {
        // 输出文件名
        filename: "js/index.js",
        // 输出文件路径 __dirname nodeJs的变量，代表当前文件的目录绝对路径
        path: path.resolve(__dirname, "dist"),
}

// 其他
{
        // 打包除了html|css|js|less以外的资源
        exclude: /\.(html|css|js|less|jpg)$/,
        loader: "file-loader",
        options: {
            name: "[hash:10].[ext]",
            outputPath: "media",
        },
}

提取css成为单独文件

npm i mini-css-extract-plugin -D

{
        test: /\.css$/,
        // 执行顺序：从右到左，从下到上
        // 创建style标签， 将js中的样式资源插入进行，添加到head中生效
        use: [
            // "style-loader",
            // 取代style-loader，提取js中的css成单独文件
            MiniCssExtractPlugin.loader,
            "css-loader",
        ],
}

plugins: [
        // 提取js中的css成单独文件
        new MiniCssExtractPlugin({
            // 对输出文件进行重命名
            filename: "css/index.css",
        }),
]

css兼容
教程
 postcss-loader
browserslist

npm install --save-dev postcss-loader autoprefixer

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

// 在根目录下，建立一个postcss.config.js文件
module.exports = {
    plugins:[
        require('autoprefixer')
    ]
}

{
                test: /\.css$/,
                // 执行顺序：从右到左，从下到上
                // 创建style标签， 将js中的样式资源插入进行，添加到head中生效
                use: [
                    // "style-loader",
                    // 取代style-loader，提取js中的css成单独文件
                    MiniCssExtractPlugin.loader,
                    // "css-loader",
                    // 帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            importLoaders: 1
                        }
                    },
                    // 默认配置
                    'postcss-loader'
                ],
}

压缩css

npm i optimize-css-assets-webpack-plugin -D

const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

new OptimizeCssAssetsWebpackPlugin()

js语法检查

npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

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

{
        test: /\.js$/,
        // 不检查第三方库
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
        // 自动修复eslint语法错误
          fix: true
        },
}

// 下一行不进行检查
// eslint-disable-next-line
console.log(111)

js兼容处理eslint

npm i babel-loader @babel/core @babel/preset-env -D
// 全部兼容性处理，解决部分兼容性处理，但体积较大，在js入口文件中引入import '@babel/polyfilly'即可识别高级语法，如promise
npm i @babel/polyfilly -D
// 按需加载
npm i core/js -D

{
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        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",
                  adge: "17",
                }
               }
            ]   
          ]
        }
      }
}

压缩html和js

// 生产环境自动压缩js代码
mode: 'production'

// 压缩html
new HtmlWebpackPlugin({
            // 复制"./src/index.html"（未引入任何资源），自动引入打包输出的所有资源（js/css）
            template: "./src/index.html",
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true,
            }
})

watch，实时打包
实时删除dist打包后的文件，复制其他文件到dist中，版权声明

image.png
以上内容综合代码

// 用来拼接绝对路径的方法
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

// 设置node环境变量
// process.env.NODE_ENV = "development";

module.exports = {
    // 模式
    mode: "development",
    // 自动压缩js代码
    // mode: "production",
    // 入口
    entry: "./src/index.js",
    // 出口
    output: {
        // 输出文件名
        filename: "js/index.js",
        // 输出文件路径 __dirname nodeJs的变量，代表当前文件的目录绝对路径
        path: path.resolve(__dirname, "dist"),
    },
    // loader的配置
    module: {
        // 匹配哪些文件，不同文件必须配置不同loader处理
        rules: [{
                test: /\.css$/,
                // 执行顺序：从右到左，从下到上
                // 创建style标签， 将js中的样式资源插入进行，添加到head中生效
                use: [
                    // "style-loader",
                    // 取代style-loader，提取js中的css成单独文件
                    MiniCssExtractPlugin.loader,
                    // "css-loader",
                    // 帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            importLoaders: 1,
                        },
                    },
                    // 默认配置
                    "postcss-loader",
                ],
            },
            {
                test: /\.less$/,
                // 将less文件编译成css文件
                use: ["style-loader", "css-loader", "less-loader"],
            },
            {
                // 默认无法处理html里的img图片
                test: /\.(jpg|png|gif)$/,
                // 将less文件编译成css文件
                loader: "url-loader",
                options: {
                    // 图片大小小于8kb，会被base64处理
                    // 优点：减少请求数量（减轻服务器压力）
                    // 缺点：图片体积会更大（文件请求速度更慢）
                    limit: 8 * 1024,
                    // esModule: false,
                    // 给图片进行重命名
                    // [hash:10]取图片的hash前10位
                    // [ext]取文件原来扩展名
                    // 807de55529.jpg
                    name: "[hash:10].[ext]",
                    outputPath: "imgs",
                },
            },
            {
                // 处理html里的img图片，负责引入html，从而能被url-loader处理
                test: /\.html$/,
                loader: "html-loader",
            },
            {
                // 打包除了html|css|js|less以外的资源
                exclude: /\.(html|css|js|less|jpg)$/,
                loader: "file-loader",
                options: {
                    name: "[hash:10].[ext]",
                    outputPath: "media",
                },
            },
        ],
    },
    // plugin的配置
    plugins: [
        // 默认创建一个空的html文件，自动引入打包输出的所有资源（js/css）
        new HtmlWebpackPlugin({
            // 复制"./src/index.html"（未引入任何资源），自动引入打包输出的所有资源（js/css）
            template: "./src/index.html",
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true,
            },
        }),
        // 提取js中的css成单独文件
        new MiniCssExtractPlugin({
            // 对输出文件进行重命名
            filename: "css/index.css",
        }),
        // 压缩css代码
        new OptimizeCssAssetsWebpackPlugin(),
    ],
    // 自动化 如自动编译、热更新等，只会在内存中编译打包，不会有任何输出（不会输出dist文件）
    devServer: {
        // 运行项目的目录(构建后)
        contentBase: path.resolve(__dirname, "dist"),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open: true,
        // 开启HMR功能：只打包更新的模块
        hot: true
    },
};

生产环境基本配置

image.png

优化配置
启动命令：npx webpack-dev-server

image.png

HMR：一个模块更改只打包这个模块，css有此功能，js和html没有

devServer: {
        // 开启HMR功能
        hot:true
}

image.png

source-map

image.png

one-of，只使用一个loader

缓存，文件内容未变，调用之前缓存文件

image.png

tree shaking，使用在应用程序中未使用的代码

image.png

code split，代码分割，按需加载

image.png

懒加载和预加载，引用CDN
懒加载，进行某个操作时才加载对应文件
 https://www.cnblogs.com/xbzhu/p/11815197.html

image.png

dll，单独打包第三方库，不用重复打包

定义并区分环境变量

webpack5.x

webpack4.x—5.x

一、资源

二、安装

三、教程

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读