优秀的编程知识分享平台

网站首页 > 技术文章 正文

Webpack基础应用篇 - 「5」自动引入资源

nanyue 2024-10-09 13:13:45 技术文章 4 ℃

到目前为止，我们都是在 index.html 文件中手动引入所有资源，然而随着应用程序增长，如果继续手动管理 index.html 文件，就会变得困难起来。然而，通过一些插件可以使这个过程更容易管控。

1.3.1 什么是插件

插件 是 webpack 的 核心 功能。插件可以用于执行一些特定的任务，包括：打包优化，资源管理，注入环境变量等。Webpack 自身也是构建于你在 webpack 配置中用到的 相同的插件系统 之上！

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

Webpack 提供很多开箱即用的 插件。

1.3.2 使用 HtmlWebpackPlugin

首先安装插件：

npm install --save-dev html-webpack-plugin

并且调整 webpack.config.js 文件：

plugins: [
  // 实例化 html-webpack-plugin 插件
  new HtmlWebpackPlugin()
]

04-manage-output/webpack.config.js

//...
module.exports = {
//...

plugins: [
    // 实例化 html-webpack-plugin 插件
    new HtmlWebpackPlugin()
]
}

打包：

[felix] 04-manage-output $ npx webpack

打包生产的 index.html内容如下：

04-manage-output/dist/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="bundle.js"></script></head>
<body>
</body>
</html>

打包后，我们发现这个 dist/index.html 似乎与先前的 index.html 并没有关系，HtmlWebpackPlugin 会默认生成它自己的 index.html 文件，并且所有的 bundle（bundle.js） 会自动添加到 html 中。

能否基于原有的 index.html 文件打包生成新的 index.html呢？可以通过阅读 HtmlWebpackPlugin 插件提供的全部的功能和选项来找到答案。

首先删除 index.html 手工引入的 js文件：

04-manage-output/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>千锋大前端教研院-Webpack5学习指南</title>
</head>
<body>
</body>
</html>

再次调整 webpack.config.js 文件：

plugins: [
   // 实例化 html-webpack-plugin 插件
   new HtmlWebpackPlugin({
     template: './index.html', // 打包生成的文件的模板
     filename: 'app.html', // 打包生成的文件名称。默认为index.html
     // 设置所有资源文件注入模板的位置。可以设置的值 true|'head'|'body'|false，默认值为 true
     inject: 'body' 
   })
]

04-manage-output/webpack.config.js

//...
module.exports = {
//...

plugins: [
    // 实例化 html-webpack-plugin 插件
    new HtmlWebpackPlugin({
 template: './index.html', // 打包生成的文件的模板
      filename: 'app.html', // 打包生成的文件名称。默认为index.html
      inject: 'body' // 设置所有资源文件注入模板的位置。可以设置的值 true|'head'|'body'|false，默认值为 true
    })
]
}

打包：

[felix] 04-manage-output $ npx webpack
asset bundle.js 3.15 KiB [compared for emit] (name: main)
asset app.html 414 bytes [emitted]
runtime modules 670 bytes 3 modules
cacheable modules 180 bytes
  ./src/index.js 77 bytes [built] [code generated]
  ./src/hello-world.js 103 bytes [built] [code generated]
webpack 5.54.0 compiled successfully in 95 ms

查看 app.html 内容：

04-manage-output/dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>千锋大前端教研院-Webpack5学习指南</title>
</head>
<body>
<script defer src="bundle.js"></script></body>
</html>

这次打包应用到了我们的模板文件 index.html, 并且生成了新的文件 app.html, 文件里自动引用的 bundle.js也从 <header>迁移到了<body>里。

1.3.3 清理dist

仔细留意一下，我们发现 dist/index.html仍旧存在，这个文件是上次生成的残留文件，已经没有用了。可见，webpack 将生成文件并放置在 /dist 文件夹中，但是它不会追踪哪些文件是实际在项目中用到的。通常比较推荐的做法是，在每次构建前清理 /dist 文件夹，这样只会生成用到的文件。让我们使用 output.clean 配置项实现这个需求。

output: {
    // 打包前清理 dist 文件夹
    clean: true
}

04-manage-output/webpack.config.js

//...
module.exports = {
//...

output: {
    //...

// 打包前清理 dist 文件夹
    clean: true
  },

  //...
}

再次打包：

检查 /dist 文件夹。现在只会看到构建后生成的文件，而没有旧文件！

最后，在浏览器里运行我们打包好的页面：

Tags：

猜你喜欢

最近发表
标签列表