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 webpack-dev-server@4.15.1 -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>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>
二、html-webpack-plugin 插件安装和使用
HtmlWebpackPlugin
简化了 HTML
文件的创建,可以通过此插件自定义index.html
页面的内容 。该插件将为你生成一个 HTML5
文件, 并自动会使用 script
标签引入你所有 webpack
生成的 bundle.js
文章来源:https://www.toymoban.com/news/detail-611778.html
参考网址:HtmlWebpackPlugin中文文档文章来源地址https://www.toymoban.com/news/detail-611778.html
2.1 安装
- 不指定版本安装:
npm install html-webpack-plugin -D
- 指定版本安装:
npm install html-webpack-plugin@5.5.3 -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>
到了这里,关于第3集丨webpack 江湖 —— 插件(plugin)的安装和使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!