第3集丨webpack 江湖 —— 插件(plugin)的安装和使用
目录
- 一、webpack-dev-server 安装和使用
-
- 1.1 安装
- 1.2 配置
- 1.3 测试查看效果
-
- 1.3.1 执行打包
- 1.3.2 注意点
- 二、html-webpack-plugin 插件安装和使用
-
- 2.1 安装
- 2.2 配置
- 2.3 修改index.html
- 2.4 测试
webpack plugins 插件可以完成更多 loader 不能完成的功能。插件(plugin)的使用一般是在 webpack 的配置信息 plugins 选项中指定。Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。
一、webpack-dev-server 安装和使用
webpack-dev-server 可用于快速开发应用程序。类似于node.js 阶段用到的 nodemon 工具，每当修改了源代码，webpack 会自动进行项目的打包构建。
参考网址：DevServer 中文文档
1.1 安装
- 不指定版本安装
npm install webpack-dev-server -D - 指定版本安装
npm install [email protected] -D
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm install webpack-dev-server -D
added 192 packages in 12s
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>
1.2 配置
- 修改
package.json下的scripts的dev命令如下：
"scripts": {
// scripts 节点下的脚本，可通过 npm run 执行
"dev": "webpack serve"
},
- 修改
webpack.config.js，增加devServer节点信息，如下所示：
// 导入node.js中专门操作路径的模块
const path = require("path")
module.exports = {
mode:'development',
// 打包入口的文件路径，__dirname表示当前文件的存放路径，即工程路径
entry:path.join(__dirname,'./src/index.js'),
output: {
// 输出文件的存放路径
path: path.join(__dirname,'./dist'),
// 输出文件的名称
filename: 'bundle.js'
},
devServer: {
static: {
directory: path.join(__dirname, "/"),
},
// compress: true,
port: 8080,
host:'127.0.0.1',
open:true
}
}
1.3 测试查看效果
1.3.1 执行打包
- 执行命令：
npm run dev，进行项目打包
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm run dev
> webpack@1.0.0 dev
> webpack serve
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.19:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'D:\A_MyWork\M05.MYCode\vscode\javascript\webpack\' directory
asset bundle.js 581 KiB [emitted] (name: main)
runtime modules 27.3 KiB 12 modules
modules by path ./node_modules/ 456 KiB
modules by path ./node_modules/webpack-dev-server/client/ 71.8 KiB 16 modules
modules by path ./node_modules/webpack/hot/*.js 5.3 KiB
./node_modules/webpack/hot/dev-server.js 1.94 KiB [built] [code generated]
./node_modules/webpack/hot/log.js 1.86 KiB [built] [code generated]
+ 2 modules
modules by path ./node_modules/html-entities/lib/*.js 81.8 KiB
./node_modules/html-entities/lib/index.js 7.91 KiB [built] [code generated]
./node_modules/html-entities/lib/named-references.js 73 KiB [built] [code generated]
+ 2 modules
./node_modules/jquery/dist/jquery.js 278 KiB [built] [code generated]
./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
./node_modules/events/events.js 14.5 KiB [built] [code generated]
./src/index.js 396 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 3693 ms
1.3.2 注意点
- 在浏览器中访问：
http://127.0.0.1:8080/src/，查看效果。观察发现：一旦我们修改index.js源代码，按下保存，就会进行自动打包构建 - 另外一个测试问题是：修改源代码后，页面不生效。原因是：生成的文件没有存在物理磁盘，而在内存上。所以在磁盘上看不到生成的文件，但是在浏览器中却可以访问该文件
http://127.0.0.1:8080/bundle.js。 - 此时，需要修改
index.html文件，引用内存里的bundle.js即可。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="/bundle.js">script>
head>
<body>
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
<li>6li>
<li>7li>
<li>8li>
<li>9li>
ul>
body>
html>
二、html-webpack-plugin 插件安装和使用
HtmlWebpackPlugin 简化了 HTML 文件的创建，可以通过此插件自定义index.html页面的内容 。该插件将为你生成一个 HTML5 文件， 并自动会使用 script 标签引入你所有 webpack 生成的 bundle.js
参考网址：HtmlWebpackPlugin中文文档
2.1 安装
- 不指定版本安装：
npm install html-webpack-plugin -D - 指定版本安装：
npm install [email protected] -D
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm install html-webpack-plugin -D
added 31 packages in 4s
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>
2.2 配置
- 修改
webpack.config.js，增加plugins节点信息，如下所示：
// 导入node.js中专门操作路径的模块
const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
// 指定复制源文件的路径
template:'./src/index.html',
// 指定创建文件的生成路径
filename:'./index.html'
})
module.exports = {
mode:'development',
// 打包入口的文件路径，__dirname表示当前文件的存放路径，即工程路径
entry:path.join(__dirname,'./src/index.js'),
output: {
// 输出文件的存放路径
path: path.join(__dirname,'./dist'),
// 输出文件的名称
filename: 'bundle.js'
},
devServer: {
static: {
directory: path.join(__dirname, "/"),
},
// compress: true,
port: 8080,
host:'127.0.0.1',
open:true
},
plugins:[htmlPlugin]
}
2.3 修改index.html
- 去掉引用的
bundle.js，因为插件会自动引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="./index.js"></script> -->
<!-- 加载和引用内存里的bundle.js -->
<!-- <script src="/bundle.js"></script> -->
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
2.4 测试
- 执行命令：
npm run dev，进行项目打包，查看页面源代码会发现，页面自动引入了bundle.js
<script defer src="bundle.js">script>head>