Webpack常见的插件和模式

最新推荐文章于 2024-05-08 17:28:57 发布

悠然予夏

最新推荐文章于 2024-05-08 17:28:57 发布

阅读量1k

点赞数

分类专栏： node 文章标签： webpack vue.js 前端

本文链接：https://blog.csdn.net/weixin_52851967/article/details/128658654

版权

node 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

1、认识Plugin

Webpack的另一个核心是Plugin，官方有这样一段对Plugin的描述：

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

上面表达的含义翻译过来就是：

Loader是用于特定的模块类型进行转换；
Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；

2、CleanWebpackPlugin

前面我们演示的过程中，每次修改了一些配置，重新打包时，都需要手动删除dist文件夹：

我们可以借助于一个插件来帮助我们完成，这个插件就是CleanWebpackPlugin；

首先，我们先安装这个插件：

npm install clean-webpack-plugin -D

之后在插件中配置：

const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = {
    // 其他省略
    plugins: [
        new CleanWebpackPlugin()
    ]
}

3、HtmlWebpackPlugin

另外还有一个不太规范的地方：

我们的HTML文件是编写在根目录下的，而最终打包的dist文件夹中是没有index.html文件的。
在进行项目部署的时，必然也是需要有对应的入口文件index.html；
所以我们也需要对index.html进行打包处理；

对HTML进行打包处理我们可以使用另外一个插件：HtmlWebpackPlugin；

npm install html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 其他省略
  plugins: [
    new VueLoaderPlugin(),
    // new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // 指定生成的模板html中的title名
      title: "电商项目"
    })
]

3.1、生成index.html分析

我们会发现，现在自动在dist文件夹中，生成了一个index.html的文件：
该文件中也自动添加了我们打包的bundle.js文件；

<!doctype html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>电商项目</title>
    <script defer="defer" src="bundle.js"></script>
</head>
<body>
</body>
</html>

这个文件是如何生成的呢？

默认情况下是根据ejs的一个模板来生成的；
在html-webpack-plugin的源码中，有一个default_index.ejs模块；

3.2、自定义HTML模板

如果我们想在自己的模块中加入一些比较特别的内容：

比如添加一个noscript标签，在用户的JavaScript被关闭时，给予响应的提示；
比如在开发vue或者react项目时，我们需要一个可以挂载后续组件的根标签 <div id="app"></div>；

这个我们需要一个属于自己的index.html模块：

<!DOCTYPE html>
<html lang="">
  <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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3.3、自定义模板数据填充

上面的代码中，会有一些类似这样的语法<% 变量 %>，这个是EJS模块填充数据的方式。

在配置HtmlWebpackPlugin时，我们可以添加如下配置：

template：指定我们要使用的模块所在的路径；
title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息；

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 其他省略
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "电商项目",
      // 指定自定义的模板html
      template: "./index.html"
    })
  ]
}

4、DefinePlugin的介绍

但是，这个时候编译还是会报错，因为在我们的模块中还使用到一个BASE_URL的常量：

这是因为在编译template模块时，有一个BASE_URL：

<link rel="icon" href="<%= BASE_URL %>favicon.ico">；
但是我们并没有设置过这个常量值，所以会出现没有定义的错误；

这个时候我们可以使用DefinePlugin插件；

DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）：

const { DefinePlugin } = require("webpack")

module.exports = {
    // 其它代码省略
  plugins: [
    new DefinePlugin({
      BASE_URL: "'./'", // 这里面的内容会当成js代码执行，所以要想它变成字符串，需要在双引号中嵌套单引号
      coderwhy: "'why'",
      counter: "123"
    })
  ]
}

这个时候，编译template就可以正确的编译了，会读取到BASE_URL的值；

main.js（这是webpack打包时的入口文件）

// 使用通过DefinePlugin注入的变量
console.log(coderwhy)
console.log(counter)

// 这个里面的值，用来判断当前的环境是生产环境还是开发环境（默认为：production）
console.log(process.env.NODE_ENV)

5、Mode配置

Mode配置选项，可以告知webpack使用相应模式的内置优化：

默认值是production（什么都不设置的情况下）；
可选值有：'none' | 'development' | 'production'；

这几个选项有什么样的区别呢？

选项	描述
development	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development，为模块和chunk启用有效的名。
production	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。为模块和chunk启用确定性的混淆名称。FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin,NoEmitOnErrorsPlugin 和 TerserPlugin
none	不使用任何默认优化选项