认识Webpack插件Plugin;CleanWebpackPlugin插件;HtmlWebpackPlugin;DefinePlugin;Mode模式

目录

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

之后在webpack.config.js中配置:

js 复制代码
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

js 复制代码
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

生成index.html分析

现在自动在dist文件夹中,生成了一个index.html的文件, 该文件中也自动添加了打包的bundle.js文件;

文件是如何生成的?

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

生成的index.html内容是默认的模板,也可以生成自己想要的模板

自定义HTML模板

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

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

这个需要一个属于自己的index.html模块,比如说下面这个模板

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>

自定义模板数据填充

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

在配置HtmlWebpackPlugin时,可以添加如下配置:

  • template:指定要使用的模块所在的路径;
  • title:在进行htmlWebpackPlugin.options.title读取时,就会读到该信息;
js 复制代码
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: "项目名称",
      template: "./index.html"
    })
  ]
}     

4_DefinePlugin

4.1_介绍

但是,这个时候编译还是会报错,因为自定义的模块中还使用到一个BASE_URL的常量。报错如下

js 复制代码
ERROR in Template execution failed: ReferenceError:BASE_URL is not defined
ERROR in ReferenceError: BASE_URL is not defined

这是因为在编译template模块时,有一个BASE_URL:<link rel="icon" href="<%= BASE_URL %>favicon.ico">,但是并没有设置过这个常量值,所以会出现没有定义的错误;

这个时候可以使用DefinePlugin插件;

4.2_DefinePlugin的使用

DefinePlugin允许在编译时创建配置的全局常量,是一个webpack内置的插件(不需要单独安装):

js 复制代码
const { DefinePlugin } = require("webpack")

module.exports = {
  plugins: [
    new DefinePlugin({
      BASE_URL: "'./'",
      coder: "'xxx'", 	//当成一个全局变量,根据实际情况决定是否添加
      counter: "123"	 //当成一个全局变量
    })
  ]
}

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

5_Mode模式

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

  • 默认值是production(什么都不设置的情况下);
  • 可选值有:'none' | 'development' | 'production';

这几个选项的区别?

相关推荐
Summer不秃3 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰7 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye13 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm15 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
_半夏曲31 分钟前
node.js、nginx、iis、tomcat针对部署方面的简述
nginx·node.js·tomcat
乐闻x42 分钟前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚44 分钟前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生1 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互