第3集丨webpack 江湖 —— 插件(plugin)的安装和使用

最新推荐文章于 2024-08-21 08:23:02 发布

秋堂主

最新推荐文章于 2024-08-21 08:23:02 发布

阅读量1k

点赞数

分类专栏： Webpack 江湖文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/DUQGQG/article/details/131921139

版权

Webpack 江湖专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

参考网址：HtmlWebpackPlugin中文文档

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>

秋堂主

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录