[Webpack并不难]使用教程（三）--- plugins

Youngs 发布于2019-08-22 13:40 / 1127人阅读

摘要：使用教程一，，，使用教程二版本官方的文档上一篇讲到的是被用来转换某些类型的模块，它则可以用来做更广泛的任务。可看作绑定事件，打包时会触发事件。它的作用是定义全局常量，是常量。为，启用两步之间的延迟。请注意，规范建议始终使用引号。

使用教程（一）--- entry，devtool，output，resolve
使用教程（二）--- module.loaders
Webpack版本 3.10.0

Plugins (官方的文档)

上一篇讲到的 loader 是被用来转换某些类型的模块，它则可以用来做更广泛的任务。

如：模板编译输出，捆绑优化，定义类似环境变量等等。

plugins: [
    new webpack.DefinePlugin({
      "process.env": require("../config/dev.env")
    }),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "index.html",
      inject: true
    }),
  ]

plugins: 数组形式包住一个个 plugin 实例。

每个插件实例是一个具有 apply 属性的 js 对象 (Function.prototype.apply)。

const webpack = require("webpack");
const configuration = require("./webpack.config.js");
let compiler = webpack(configuration);

function HelloWorldPlugin (options) {
// do something...
}

// this 指向了 compiler。
HelloWorldPlugin.prototype.apply = function (compiler) {
// compiler.plugin(),可看作绑定事件，打包时会触发事件。
compiler.plugin("run", function() { 
    console.log("hello world!")
});
};

每个插件都有自身 options（配置）。

下面说下常见的 plugin 。

webpack.DefinePlugin (官方的文档)

webpack.xxxxPlugin 这种插件是 webpack 的内置插件。

DefinePlugin：它的作用是定义全局常量，是常量。即在模块用它定义的全局常量，那么你就不能改变它的值啦。用法例子：

//webpack.config.js 
Plugins: [
    new webpack.DefinePlugin({
        "_ABC_": false
    })
]

// 在某个要打包的js模块里
if （_ABC_）{
    console.log("_ABC_是 true，才看得见这输出");
}

webpack.HotModuleReplacementPlugin (官方的文档)

它是热模块更换（HMR）。在应用程序运行时交换，添加或删除模块，而无需完全重新加载。

它的options：

配置属性	数据类型	作用
multiStep	Boolean	如果 true 插件将分两步建立。首先编译常更新的模块，然后编译剩余的普通资源。
fullBuildTimeout	Number	multiStep 为 true，启用两步之间的延迟。
requestTimeout	Number	下载某些东西的超时时间

官方讲，这些 options 可能会被弃用 ，就 new webpack.HotModuleReplacementPlugin() 就可以了。

webpack.NoEmitOnErrorsPlugin (官方的文档)

它的作用：跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。

webpack.optimize.DedupePlugin (官方的文档)

项目中会有很多模块，有些模块之间存在相同的依赖，那么它的作用是把重复的依赖删除掉。

例如 A 模块和 B 模块都依赖lodash.js，那么就留在一个 lodash.js ，多余的删除。

webpack.ProvidePlugin (官方的文档)

会自动加载模块，不用 import / require 导入都可用。

Plugins: [
    $: "jquery"
]
// 不用导入 jquery ，都可用 $。
// 可以理解为在全局就 import $ from "jquery" 或 const $ = require("jquery")

HtmlWebpackPlugin --第三方插件（官方的文档）

根据你提供的 html 模板生成 html。

因为是第三方插件，需要安装，导入使用。

// 安装
npm install --save-dev html-webpack-plugin

// 导入
const HtmlWebpackPlugin = require("html-webpack-plugin");

// 使用
 new HtmlWebpackPlugin({
  filename: "index.html",
  template: "index.html",
  inject: true
  ... // 其他配置，可看下面。
 })

filename: 生成的文件名。可以带路径。

template：html 模板路径。

inject："true" | "head" | "body" | "false" 。

true：将所有资源（ js，css 等等）注入模板，js 资源在注入 html 里 body 底部。

body: 将所有 js 资源注入 html 里 body 底部。

head：将 js 资源放在 html 里 head 。

hash： "true" | "false"。如果为 true ，webpack 打包后，所有 js 和 css 都会带有 hash 值。这对缓存清除非常有用。

minify： {...} | "false" 。
{...}：通过 html-minifier 的选项对象，来减小打包后文件的大小。在生产环境一般用到。看看里面一般用到什么吧。

collapseWhitespace："true" | "false" 。
可以理解为如果 true ，则减少html 中节点与节点之间的空白区域。用于优化 html 。

removeComments：如果 true ，则去掉 html 里的注释。

removeAttributeQuotes：如果 true ，则尽可能地去掉 html 里标签元素属性的引号，有些特定属性则不会。（ 请注意，HTML规范建议始终使用引号。谨慎使用这选项 ）

转换为：

// 可见有些特定的属性是不会去掉引号的。

chunksSortMode："none" | "auto" | "dependency" |"manual" | {function} 。
作用：对注入 html 中的 js 模块进行排序。默认："auto" (自动排序)

auto：默认，自动排序。

none：不排序。

dependency：按依赖排序。

manual：手动排序。

{function}：按你传入函数的功能进行排序。

以上是常见的，还有其他的，想了解可以看下官方文档哦。

plugins 就讲到这里了，以上都是一些常见常用的插件，喜欢的朋友可以点波赞，谢谢啦。

使用教程四

云服务器 GPU云服务器 webpack教程 webpack使用 webpack4教程 webpack 使用公用cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92386.html

[Webpack并不难]使用教程（二）--- module.loaders

摘要：官方的文档模块受到影响的选项。官方文档通过注入标签将添加到。官方文档这两者一般都是配合在一起用的。代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成码引用。不过它的放后面。第一篇讲了Webpack的安装，以及配置文件的 entry，devtool，output，resolve。这篇接着说配置文件的 module。想看看第一篇的朋友可以点这里。 ...

HollisChuang 2019-08-21 17:59 评论0 收藏0
[webpack并不难]总结

摘要：刚写的时候，心里有很多小声音写不好的万一写错，误导别人怎么办等等。最重要还是感谢你的支持。接下来还会写些有趣的东西带给大家。这个教程就此完结咯，两周前的一个念头也实现了。刚写的时候，心里有很多小声音：写不好的 , 万一写错，误导别人怎么办等等。万事开头难，写着写着就发现和之前看到的一句话很贴切，输入一些东西很简单的，但你要输出确实比较难。使用教程（一）--- entry，...

forrest23 2019-08-22 11:18 评论0 收藏0
[Webpack并不难]使用教程（四）--- devServer

摘要：使用教程一，，，使用教程二使用教程三我的版本是官方的文档在开发模式下，提供虚拟服务器，让我们进行开发和调试。文档如果为，开启虚拟服务器时，为你的代码进行压缩。的警告和错误是不输出到终端的。而则作用于请求路径上的。不想启用也可以填。使用教程（一）--- entry，devtool，output，resolve使用教程（二）--- module.loaders使用教程（三）--- pl...

Anonymous1 2019-08-22 11:15 评论0 收藏0
[Webpack并不难]把它当人物养成游戏吧。

摘要：发觉其实真的不难，毕竟它是一个工具，如果用起来都不顺手，那为什么那么多人用，是不是。我觉得可以把当成人物养成游戏来玩，哦不，来学。听说把宝石放进这工具就能自动更新打包。公司最近弄来了一些未来的文言文，你把它翻译成现代文吧。前言这段可以跳过看下面的。本来，这个教程想完结的了。但回头看自己写的，感觉就像写明了什么意思，具体怎么使用都没说明白，而且让人看得会有点乏味吧。我也是刚开始...

andot 2019-08-22 11:17 评论0 收藏0
使用offline-plugin搭配webpack轻松实现PWA

摘要：配合的项，能够实现缓存外部资源的功能。允许接受来自的消息，默认值为。检查新版本的的更新信息。这也是我在研究阶段直接使用时所发现的问题。建议仅在生产模式内使用。 showImg(https://segmentfault.com/img/bVSVG1?w=1178&h=484); 谈起PWA，许多人可能还只停留在了解的层面，比较少在实践中真正地尝试过，更多的仅仅是对着网上的教程和例子大概玩...

shadajin 2019-08-22 10:53 评论0 收藏0