转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
原文出处：https://wanago.io/2018/07/23/webpack-4-course-part-three-working-with-plugins/

大家好！今天我们介绍插件这个概念。插件与loader的不同之处在于它能完成更复杂的任务。基本上，loader做不了的其他事情，就可以用插件来做。loader往往作用于某种特定类型的文件，而插件则更加通用。这次，我们来学习如何使用插件，看看它解决了什么问题。本文会涉及一些日常用例，比如，生成链接了所有资源的HTML，以及把CSS抽取为单独的文件。

Webpack 4教程 - 第三部分 如何使用插件

使用插件最基本的方法是把它们放在配置文件中的plugins属性下。你需要调用new操作符创建一个插件的实例。

若想知道更多关于new关键字和原型的，请查看原型，ES6 class背后的大哥。

html-webpack-plugin

手动的把所有JavaScript文件添加到HTML里是件很繁重的事情。幸好你不必那样做！这有一个非常有用的插件HtmlWebpackPlugin。

npm install html-webpack-plugin

它使用起来很方便：

// webpack.config.js

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

module.exports = {

  plugins: [

    new HtmlWebpackPlugin()

  ]

};

它将会为我们在dist文件夹下面创建index.html文件。我们的JavaScript文件会以链接形式插入在<body>标签后面。

你需要自己追踪插入HTML的文件，而当它们变多时，这就很繁琐了。此插件则简化了这件事情。

另一件值得注意的重要事情就是，你的外链文件名可能会因为打包时使用哈希而改变。这就让HtmlWebpackPlugin更加有用了，因为你不需要手动追踪那些文件名。这个机制被用来应对浏览器的缓存。我们会在后面的课程讨论这个话题。

给插件传递配置

你可以给插件传递更多的配置。下面是一个为HtmlWebpackPlugin传入一个HTML模板的例子：

// webpack.config.js

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

module.exports = {

  plugins: [

    new HtmlWebpackPlugin({template: './src/index.html'})

  ]

};

有了它，插件就不再使用默认的HTML文件，而会使用你提供给它的那个。 可以在这个库看到更多的配置项。

把同一个插件使用多次

你可能会好奇，为什么我们每次使用插件，都要用new新建一个实例。这是因为你能够不止一次地使用同一个插件。

当创建多页面应用时，你可能需要不止一个HTML模板文件。

如果你想了解更多关于entry和output的内容，以及如何使用它们创建多文件应用，可参考我们的第一节课。

这可以通过多次使用HtmlWebpackPlugin来实现。　　

// webpack.config.js

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

const path = require('path');

module.exports = {

  entry: {

    one: './src/one.js',

    two: './src/two.js',

  },

  output: {

    filename: '[name].bundle.js',

    path: path.resolve(__dirname, 'dist')

  },

  plugins: [

    new HtmlWebpackPlugin({

      filename: 'one.html',

      template: './src/one.html',

      chunks: ['one']

    }),

    new HtmlWebpackPlugin({

      filename: 'two.html',

      template: './src/two.html',

      chunks: ['two']

    })

  ]

};

插件的实例，会基于chunks数组对入口点（entry point）进行匹配。根据上面的配置运行Webpack，会得到：one.html，tow.html，one.bundle.js，two.bundle.js。

插件和loader并用

在之前的教程里，我们把css-loader和style-loader结合起来，并把输出的css代码插入<style>标签。你可能倾向于输出真正的css的文件给用户。如果那样的话，需要使用mini-css-extract-plugin。

在过去，我们曾使用 ExtractTextWebpackPlugin 来做这件事情。但从Webpack 4 开始就不应该再使用它了。若想了解更多，参见这里。

这里演示了怎么做：

npm install mini-css-extract-plugin

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

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {

  entry: './src/style.js',

  module: {

    rules: [

      {

        test: /\.css$/,

        use: [

            MiniCssExtractPlugin.loader,

            'css-loader'

        ]

      }

    ]

  },

  plugins: [

    new HtmlWebpackPlugin(),

    new MiniCssExtractPlugin()

  ]

}

由于使用了HtmlWepbackPlugin，自动生成的css文件被插入到HTML中。你会得到像下面这样的输出：

<!-- index.html -->

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Webpack App</title>

  <link href="main.css" rel="stylesheet"></head>

  <body>

  <script type="text/javascript" src="main.js"></script></body>

</html>

以上面的配置运行Webpack，每个包含CSS导入的JavaScript文件都将得到一个CSS输出文件。若想改变这种行为，需要使用SplitChunksPlugin，我们将会在另一个教程里学习它。你也可以在官方文档里找到操作说明。

总结

今天我们学习了什么是插件，及其基本使用方法。不仅如此，我们还学习了如何给插件传递配置项，以及如何将它们与loader一并使用。虽然这里只是一部分插件的用例，但其他插件的使用方法也是类似的。你可查看官方的插件列表来寻找你需要的插件。你也可以使用搜索引擎去发现更多。Webpack本身就是基于同样的一套插件系统来构建的，所以学习它们在底层是如何工作的会很有趣。我们将在以后讨论这些，届时去实现我们自己的插件。

Webpack4教程 - 第三部分，如何使用插件的更多相关文章

  1. Laravel大型项目系列教程（三）之发表文章

    Laravel大型项目系列教程(三)之发表文章 一.前言 上一节教程中完成了用户管理,这节教程将大概完成发表Markdown格式文章并展示的功能. 二.Let's go 1.数据库迁移 文章模块中我们 ...

  2. [译]MVC网站教程（三）：动态布局和站点管理

    目录 1.   介绍 2.   软件环境 3.   在运行示例代码之前(源代码 + 示例登陆帐号) 4.   自定义操作结果和控制器扩展 1)   OpenFileResult 2)   ImageR ...

  3. Ocelot简易教程（三）之主要特性及路由详解

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9664977.html 上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个 ...

  4. Android Studio 入门级教程（三）：gradle项目构建

    声明 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4456420.html [系列] Andr ...

  5. SpringCloud核心教程 | 第三篇：服务注册与发现 Eureka篇

    Spring Cloud简介 Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中涉及的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全 ...

  6. 2DToolkit官方文档中文版打地鼠教程（三）：Sprite Collections 精灵集合

    这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...

  7. Python导出Excel为Lua/Json/Xml实例教程（三）：终极需求

    相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 Python导出E ...

  8. WCF入门教程（三）定义服务协定--属性标签

    WCF入门教程(三)定义服务协定--属性标签 属性标签,成为定义协议的主要方式.先将最简单的标签进行简单介绍,以了解他们的功能以及使用规则. 服务协定标识,标识哪些接口是服务协定,哪些操作时服务协定的 ...

  9. Senparc.Weixin.MP SDK 微信公众平台开发教程（三）：微信公众平台开发验证

    要对接微信公众平台的"开发模式",即对接到自己的网站程序,必须在注册成功之后(见Senparc.Weixin.MP SDK 微信公众平台开发教程(一):微信公众平台注册),等待官方 ...

随机推荐

  1. C#ComboBox控件“设置 DataSource 属性后无法修改项集合”的解决方法

    在使用ComboBox控件时,遇到了重新绑定赋值出问题的情况.正常情况下,对于数据重新赋值的或者绑定数据源的时候,为了防止数据出现问题,都会先清空原来数据,所以就这样写了,但是没有相当恰恰这样写就出现 ...

  2. 面向对象OOP概念描述

    面向对象三大特征:封装,继承,多态 封装就是把一个对象的属性私有化,同时提供一些可以被外界访问的属性的方法 继承就是在已经存在的类的定义作为基础,建立新的技术.新定义的类可以添加新的数据或功能,也可以 ...

  3. js防抖和节流

    今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...

  4. RFI to RCE challenge

    http://www.zixem.altervista.org/RCE/level1.php 构造payload: https://zixem.altervista.org/RCE/level1.ph ...

  5. Unable to get the CMake version located at

    出现这个问题说明你没有安装CMake,这个是使用NDK的时候需要下载的,可以在as上点击下载, SDK Tool里面

  6. Win7系统修改hosts无法保存怎么办？

    背景 有的时候我们需要修改hosts文件,但是在某些情况下竟提示保存不了.之前有一次IntelliJ IDEA提示我快到期了,于是我到网上找到了一个激活方法,但需要将一个地址放到hosts文件中去,此 ...

  7. 使用kubeadm平滑地升级kubenetes集群(v1.10.2到v1.10.3)

    写在前面 kubernetes是目前最炙手火热的容器管理.调度.编排平台,不仅拥有全面的生态系统,而且还开源.开放自治,谁贡献的多,谁的话语权就大,云提供商都有专门的工程师来从事kubernetes开 ...

  8. 说一下Dubbo 的工作原理？注册中心挂了可以继续通信吗？

    面试题 说一下的 dubbo 的工作原理?注册中心挂了可以继续通信吗?说说一次 rpc 请求的流程? 面试官心理分析 MQ.ES.Redis.Dubbo,上来先问你一些思考性的问题.原理,比如 kaf ...

  9. Spring Boot 2.2 增加了一个新功能，启动飞起~

    前几天栈长分享了一个好玩的框架:一个比Spring Boot快44倍的Java框架!,是不是感觉 Spring Boot 略慢?今天讲一下 Spring Boot 添加的这个新特性,可以大大提升 Sp ...

  10. qml demo分析(objectlistmodel-自定义qml数据)

    一.效果展示 如图1所示,是一个ListView窗口,自定义了文本内容和项背景色. 图1 ListView 二.源码分析 代码比较简单,主要使用了QQmlContext类的setContextProp ...