Webpack4教程 - 第三部分,如何使用插件
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处: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教程 - 第三部分,如何使用插件的更多相关文章
- Laravel大型项目系列教程(三)之发表文章
Laravel大型项目系列教程(三)之发表文章 一.前言 上一节教程中完成了用户管理,这节教程将大概完成发表Markdown格式文章并展示的功能. 二.Let's go 1.数据库迁移 文章模块中我们 ...
- [译]MVC网站教程(三):动态布局和站点管理
目录 1. 介绍 2. 软件环境 3. 在运行示例代码之前(源代码 + 示例登陆帐号) 4. 自定义操作结果和控制器扩展 1) OpenFileResult 2) ImageR ...
- Ocelot简易教程(三)之主要特性及路由详解
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9664977.html 上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个 ...
- Android Studio 入门级教程(三):gradle项目构建
声明 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4456420.html [系列] Andr ...
- SpringCloud核心教程 | 第三篇:服务注册与发现 Eureka篇
Spring Cloud简介 Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中涉及的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全 ...
- 2DToolkit官方文档中文版打地鼠教程(三):Sprite Collections 精灵集合
这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...
- Python导出Excel为Lua/Json/Xml实例教程(三):终极需求
相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 Python导出E ...
- WCF入门教程(三)定义服务协定--属性标签
WCF入门教程(三)定义服务协定--属性标签 属性标签,成为定义协议的主要方式.先将最简单的标签进行简单介绍,以了解他们的功能以及使用规则. 服务协定标识,标识哪些接口是服务协定,哪些操作时服务协定的 ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程(三):微信公众平台开发验证
要对接微信公众平台的"开发模式",即对接到自己的网站程序,必须在注册成功之后(见Senparc.Weixin.MP SDK 微信公众平台开发教程(一):微信公众平台注册),等待官方 ...
随机推荐
- 《HelloGitHub》第 35 期
<HelloGitHub>第 35 期 兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程. ...
- Java日志正确使用姿势
前言 关于日志,在大家的印象中都是比较简单的,只须引入了相关依赖包,剩下的事情就是在项目中“尽情”的打印我们需要的信息了.但是往往越简单的东西越容易让我们忽视,从而导致一些不该有的bug发生,作为一名 ...
- 《k8s-1.13版本源码分析》-测试环境搭建(k8s-1.13版本单节点环境搭建)
本文原始地址(gitbook格式):https://farmer-hutao.github.io/k8s-source-code-analysis/prepare/debug-environment. ...
- 扒一扒.NET Core的环境配置提供程序
很久之前,在玩Docker的时候顺便扒了扒,最近,终于下定决心花了些时间整理并成文,希望能够给大家一些帮助. 目录 .NET Core中的配置 ASP.NET Core中的配置 扒一扒环境变量提供程序 ...
- MySQL 四种隔离级别
什么是事务 事务是应用程序中一系列严密的操作,所有操作必须成功完成,否则在每个操作中所作的所有更改都会被撤消.也就是事务具有原子性,一个事务中的一系列的操作要么全部成功,要么一个都不做. 事务的结束有 ...
- HTML 练习淡入淡出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 数据库之redis篇(3)—— Python操作redis
虽然前面两篇已经说了redis的一些配置安装什么的,篇幅有点长,可能看完了也不知道怎么操作,这里再浓缩一下: 什么是redis redis完全开源免费的,遵守BSD协议,是一个高性能的非关系型key- ...
- 深入理解 new 操作符
和其他高级语言一样 JavaScript 也有 new 操作符,我们知道 new 可以用来实例化一个类,从而在内存中分配一个实例对象. 但在 JavaScript 中,万物皆对象,为什么还要通过 ne ...
- Docker Demo on Docker
install docker-machine $ curl -L https://github.com/docker/machine/releases/download/v0.10.0/docker- ...
- Oracle权限授予
一.用户 sys;//系统管理员,拥有最高权限 system;//本地管理员,次高权限 scott;//普通用户,密码默认为tiger,默认未解锁 二.登陆 sqlplus / as sysdba;/ ...