转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
原文出处：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. win10环境下如何运行debug

    在学习汇编的时候,会需要用到debug调试程序,但是现在win10默认已经移除了这个插件,我们需要手动安装,下面就告诉大家如何在win10环境下安装debug. 1:准备工具 1.1 DOSBox 1 ...

  2. SQL Server2008 xp_cmdshell啟用

    1. 查看系统数据库参数配置: select * from sys.configurations where name='xp_cmdshell' 修改系统数据库参数:   语法格式:     sp_ ...

  3. 织梦5.7sp1最新问题：后台不显示编辑器

    1.在后台的“系统基本参数”里修改“站点设置”的“网页主页链接:空”. 2.修改“核心设置”DedeCMS安装目录:空“. 3.试试,问题解决.

  4. 识别率很高的java文字识别技术

    java文字识别程序的关键是寻找一个可以调用的OCR引擎.tesseract-ocr就是一个这样的OCR引擎,在1985年到1995年由HP实验室开发,现在在Google.tesseract-ocr ...

  5. 模式识别笔记4-集成学习之AdaBoost

    目前集成学习(Ensemble Learning) 分为两类: 个体学习器间存在强依赖关系.必须串行化生成的序列化方法:Boosting 个体学习器间不存在强依赖关系,可同时生成的并行化方法:Bagg ...

  6. oracle 一些常用的sql优化规则

    1.高效使用groupby 提高GROUP BY语句的效率,可以通过将不需要的记录在GROUP BY之前过滤掉. 低效: SELECT JOB ,AVG(SAL) FROM EMP GROUP BY ...

  7. Mac电脑上一款非常时尚高清的动态壁纸Living Wallpaper HD

    很多朋友Mac电脑上都喜欢用动态壁纸,Living Wallpaper HD是本人尝试的一款非常不错的高清动态壁纸.有时钟.天气等各种组建,非常时尚美观. Living Wallpaper HD下载地 ...

  8. 开发人员的必备工具Git（初级）

    Git是什么 Git是目前世界上最先进的分布式版本控制系统. 这个软件用起来就应该像这个样子,能记录每次文件的改动: 举个栗子 :       版本 用户 说明 日期 1 张三 删除了软件服务条款5 ...

  9. ASP.NET Core Middleware 抽丝剥茧

    一. 宏观概念 ASP.NET Core Middleware是在应用程序处理管道pipeline中用于处理请求和操作响应的组件. 每个组件是pipeline 中的一环. 自行决定是否将请求传递给下一 ...

  10. EF实体实现链接字符串加密

    1.加密解密方法 using System;using System.Security.Cryptography; using System.Text;namespace DBUtility{ /// ...