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中。你会得到像下面这样的输出：

<!DOCTYPE html>

<html>

<head>

<title>Webpack App</title>

<body>

</html>

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

总结

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

标题名称：Webpack4教程-第三部分，如何使用插件-创新互联
链接分享：https://www.cdcxhl.com/article8/diopip.html

成都网站建设公司_创新互联，为您提供App设计、软件开发、网站策划、App开发、手机网站建设、企业网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容