webpack 学习从零到亿过程
- 我想初始化一个 node 项目
npm init- 安装 webpack 包
npm install webpack webpack-cli --save-dev - 写 webpack 配置文件 config/webpack.dev.config.js
- 安装了 path
npm i path -s -d并新建了 webpack.dev.config.js 写入下面简单配置
const path = require("path");
module.exports = {
entry: "./src/index.js", // 入口文件路径
output: {
path: path.resolve(__dirname, "../", "dist"), // 输出目录路径
filename: "[name]-[hash]-main.js", // 输出文件名
},
mode: "production",
};
- 在 package.json 中添加下面执行脚本命令
"dev": "webpack-cli --config config/webpack.dev.config.js"
-
终端运行
npm run dev出现 dist 文件和打包结果 -
安装了
npm install clean-webpack-plugin --save-dev每次执行之后相对打包结果进行清空 -
package.json 中添加如下配置
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(),
],
-
在此执行
npm run dev可以发现里面的 dist 目录每次都会被删除之后再去添加 -
打包工作完成之后，我想使用 webpack 启动一个服务去访问我的资源要怎么做？
-
首先我们安装
npm install -D webpack-dev-server然后我们需要去 package.json 中添加一个新的命令
"dev2": "webpack serve --config config/webpack.dev.config.js"
- 没错是同一个配置文件，你也可以换一个新的文件，在原有的基础上我们需要添加 devserver
{
// 其他配置,
devServer: {
static: {
directory: path.join(__dirname,'../', 'public'),
},// 服务器根目录
port: 3000, // 服务器端口号
open: true, // 自动打开浏览器
},
}
- 这个 static 为 webpack 5.* 版本的哈 这意思就是启动这个服务之后，将这个静态资源加载进去，了解 nginx 配置的人都明白，当我们启动一个 nginx，我们可以访问我们 nginx.config 文件中的那些静态资源，原理应该和这个差不多，我们先去根目录下创建一个 public 文件并写一个 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
我是运行态
</body>
</html>
- 这样我们执行
npm run dev2会发现自动打开http://localhost:3000/端口且内容都已展示
❓：我们想将打包之后的 js 也加载进去,怎么去做呢？
?：我们可以将我们打包之后的 js 文件输出文件名写为固定的 main.js,即如下：
{
output: {
path: path.resolve(__dirname, 'dist'), // 输出目录路径
filename: 'main.js', // 输出的JavaScript文件名
}
}