Java OpenResty Spring Spring Boot MySQL Redis MongoDB PostgreSQL Linux Android Nginx 面试 小程序 Arthas JVM AQS juc Kubernetes Docker DevOps


Webpack 相关知识点

Webpack 大约 7278 字

初始化工程

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中 一切皆模块,cssless、图片等。

安装style-loadercss-loader解析CSS语法。

安装less-loaderless解析less语法。

安装url-loaderfile-loader处理图片srchttp链接或base64字符串。

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

安装clean-webpack-plugin每次打包时删除旧文件。(Webpack5无需此插件,直接设置outputclean: 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")
        }
    }
}
阅读 95 · 发布于 2022-12-19

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb

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

扫描二维码关注我
昵称:
随便看看 换一批