Webpack 相关知识点

Webpack About 7,278 words

初始化工程

init会生成package.json。

npm init -y

安装 webpack

npm install webpack@5.42.1 webpack-cli@4.9.0 -D

配置文件

工程根目录下新建webpack.config.js：指定打包入口和输出文件路径。

const path = require("path");

module.exports = {
    // development
    // production
    mode: "development",
    // 指定打包入口
    entry: path.join(__dirname, "./src/index.js"),
    // 指定输出路径
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundle.js"
    }
}

单次启动

每次修改文件都需要重新运行命令。

启动脚本

package.json中的scripts节点下添加"dev": "webpack"。

"scripts": {
    "dev": "webpack"
}

运行命令

npm run dev

热启动

安装 webpack-dev-server

npm install webpack-dev-server@3.11.2 -D

修改启动命令

"scripts": {
    "dev": "webpack serve"
}

运行命令

npm run dev

可能的错误

[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function

解决方法：webpack-cli版本更新至4.9.0

npm install webpack-cli@4.9.0 -D

原理

监听文件变化，类似于nodemon。

webpack工作在/，所以注意需要修改HTML中引用js的路径

> webpack serve

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\demo-webpack
i ｢wdm｣: asset bundle.js 327 KiB [emitted] (name: main)

src中的路径以/开头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    hello world
</div>
<script src="/bundle.js"></script>
</body>
</html>

html-webpack-plugin

将http://localhost:8080/src定向到http://localhost:8080。

HTML中无需在引入script，该插件会自动添加script的引用。

npm install html-webpack-plugin@5.3.2 -D

配置

const path = require("path");

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

const htmlPlugin = new HtmlPlugin({
    // 指定复制哪个页面
    template: "./src/index.html",
    // 指定复制出来的文件名和存放路径
    filename: "./index.html"
});

module.exports = {
    // development
    // production
    mode: "development",
    // 指定打包入口
    entry: path.join(__dirname, "./src/index.js"),
    // 指定输出路径
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundle.js"
    },
    // 插件数组，webpack 在运行时，会加载并调用这些插件
    plugins: [htmlPlugin]
}

查看网页源代码

会自动添加<script defer src="bundle.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script defer src="bundle.js"></script></head>
<body>
<div>
    hello world
</div>
</body>
</html>

devServer

open：首次打包完成后，自动打开浏览器。

host：指定运行的域名。

port：指定运行的端口。

module.exports = {
    devServer: {
        open: true, // 首次打包完成后，自动打开浏览器
        host: "127.0.0.1",
        port: 8080
    }
}

loader 加载器

在Webpack中 一切皆模块，css、less、图片等。

安装style-loader、css-loader解析CSS语法。

安装less-loader、less解析less语法。

安装url-loader、file-loader处理图片src为http链接或base64字符串。

安装babel-loader等解析JavaScript高级语法。

安装clean-webpack-plugin每次打包时删除旧文件。（Webpack5无需此插件，直接设置output为clean: true即可）

npm install style-loader@3.0.0 css-loader@5.2.6 -D

npm install less-loader@10.0.1 less@4.1.1 -D

npm install url-loader@4.1.1 file-loader@6.2.0 -D

npm install babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

npm install clean-webpack-plugin -D

webpack.config.js配置

const path = require("path");

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

// {CleanWebpackPlugin} es6 解构赋值
const {CleanWebpackPlugin} = require("clean-webpack-plugin");

const htmlPlugin = new HtmlPlugin({
    // 指定复制哪个页面
    template: "./src/index.html",
    // 指定复制出来的文件名和存放路径
    filename: "./index.html"
});

const cleanWebpackPlugin = new CleanWebpackPlugin();

module.exports = {
    mode: "development",

    // 插件数组，webpack 在运行时，会加载并调用这些插件
    plugins: [cleanWebpackPlugin],

    module: {
        rules: [
            {
                test: /\.css$/, use: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                // test: /\.jpg|png|git$/, use: "url-loader"
                // 超过限制将转为 http 外链形式，limit 单位是字节
                // test: /\.jpg|png|git$/, use: "url-loader?limit=22229"
                // test: /\.jpg|png|git$/, use: {
                //     loader: "url-loader",
                //     options: {
                //         limit: 22228,
                //         // 明确指定把打包生成的图片文件，存储到 dist 目录下的 image 文件夹中
                //         outputPath: "images"
                //     }
                // }
                // 多个参数使用 & 拼接
                test: /\.jpg|png|git$/, use: "url-loader?limit=22229&outputPath=images"
            },
            {
                test: /\.js$/, use: "babel-loader", exclude: /node_modules/
            }
        ]
    }
}

@ 路径解析

web.config.js中配置resolve，指定别名alias。

const path = require("path");

module.exports = {
    mode: "development",
    resolve: {
        alias: {
            // 表示 @ 代表路径是以 根目录/src
            "@": path.join(__dirname, "./src")
        }
    }
}

完整配置文件

const path = require("path");

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

// {CleanWebpackPlugin} es6 解构赋值
const {CleanWebpackPlugin} = require("clean-webpack-plugin");

const htmlPlugin = new HtmlPlugin({
    // 指定复制哪个页面
    template: "./src/index.html",
    // 指定复制出来的文件名和存放路径
    filename: "./index.html"
});

const cleanWebpackPlugin = new CleanWebpackPlugin();

module.exports = {
    // development
    // production
    mode: "development",
    // source-map 会全部暴露源码，很危险，会生成 .js.map 文件
    // devtool: "source-map",
    // 开发阶段建议都打开 source map
    devtool: "eval-source-map",
    // nosources-source-map 只暴露行号，无法定位源码，线上环境建议选择此选项
    // 或者关闭（注释掉 devtool） source-map 是最安全的
    // devtool: "nosources-source-map",
    // 指定打包入口
    entry: path.join(__dirname, "./src/index.js"),
    // 指定输出路径
    output: {
        path: path.join(__dirname, "dist"),
        filename: "js/bundle.js",
    },
    // 插件数组，webpack 在运行时，会加载并调用这些插件
    plugins: [htmlPlugin, cleanWebpackPlugin],
    devServer: {
        open: true, // 首次打包完成后，自动打开浏览器
        host: "127.0.0.1",
        port: 80
    },
    module: {
        rules: [
            {
                test: /\.css$/, use: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                // test: /\.jpg|png|git$/, use: "url-loader"
                // 超过限制将转为 http 外链形式，limit 单位是字节
                // test: /\.jpg|png|git$/, use: "url-loader?limit=22229"
                // test: /\.jpg|png|git$/, use: {
                //     loader: "url-loader",
                //     options: {
                //         limit: 22228,
                //         // 明确指定把打包生成的图片文件，存储到 dist 目录下的 image 文件夹中
                //         outputPath: "images"
                //     }
                // }
                // 多个参数使用 & 拼接
                test: /\.jpg|png|git$/, use: "url-loader?limit=22229&outputPath=images"
            },
            {
                test: /\.js$/, use: "babel-loader", exclude: /node_modules/
            }
        ]
    },
    resolve: {
        alias: {
            // 表示 @ 代表路径是以 根目录/src
            "@": path.join(__dirname, "./src")
        }
    }
}
Views: 696 · Posted: 2022-12-19

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓
Today On History
Browsing Refresh