转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
原文出处：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. Python-爬取妹子图(单线程和多线程版本)

    一.参考文章 Python爬虫之——爬取妹子图片 上述文章中的代码讲述的非常清楚,我的基本能思路也是这样,本篇文章中的代码仅仅做了一些异常处理和一些日志显示优化工作,写此文章主要是当做笔记,方便以后查 ...

  2. Spring：（二）DI依赖注入方式

    DI 依赖注入 DI(Dependency Injection)依赖注入,说简单一点就将类里面的属性在创建类的过程中给属性赋值,即将对象依赖属性(简单值,集合,对象)通过配置设值给该对象. 属性注入的 ...

  3. 从git仓库导入idea的gradle项目无法添加依赖包问题

    引言 之前将项目导入到git仓库,后来同事从git仓库将项目导入到本地,发现无法导入依赖包. 解决方法 这个勾idea是默认勾上的,意思是idea将默认使用本地离线工作模式,使用的是本地仓库,每次依赖 ...

  4. netcore程序部署到docker

    1.基础准备 1. ubuntu 18.04 2. docker version 18.09 3. netcore 2.1 2.简介 自从netcore支持跨平台之后,以及现在很多公司都是采用容器化部 ...

  5. 安装Mysql时端口号3306被占用,解决方法

    当我们在卸载mysql数据库重新安装的时候,会出现端口号3306被占用的情况 有两种解决方案: 一:可以不使用3306端口,也可以换成别的端口,如3307,3308等等 二:可以打开命令窗口 1.wi ...

  6. openlayers4 入门开发系列之地图模态层篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  7. 如何修复使用WSUS进行升级Win 10 更新1809的报错（0x8024200）

    备注:该文档有另一个姊妹篇,介绍如何修复下游服务器一直有处于需要文件下载的状况. /* Style Definitions */ table.MsoNormalTable {mso-style-nam ...

  8. LOJ #6050. 「雅礼集训 2017 Day11」TRI

    完全不会的数学神题,正解留着以后填坑 将一个口胡的部分分做法,我们考虑计算格点多边形(包括三角形)面积的皮克公式: \[S=a+\frac{1}{2}b-1\text({a为图形内部节点个数,b为边界 ...

  9. ASP.NET Core 快速入门（实战篇）

    上篇讲了<asp.net core在linux上的环境部署>.今天我们将做几个小玩意实战一下.用到的技术和工具有mysql.websocket.AngleSharp(爬虫html解析).n ...

  10. javascript中apply、call和bind的区别及方法详解

    文章目录   apply.call apply.call 区别 apply.call实例 数组之间追加 获取数组中的最大值和最小值 验证是否是数组(前提是toString()方法没有被重写过) 类(伪 ...