Webpack4教程 - 第三部分,如何使用插件

编程之家收集整理的这篇文章主要介绍了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-loaderstyle-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教程 - 第三部分,如何使用插件全部内容,希望文章能够帮你解决Webpack4教程 - 第三部分,如何使用插件所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的Web前端相关文章

// n位随机数生成 function randomNum(n) { let sString = &quot;&quot;; let strings = &quot;abcdefghijklmnopq
HTML是HyperText Markup Language的简称,中文名称:超文本标记语言,它是一种用于创建网页的 标准标记语言
JavaScript 是脚本语言,是一种解释性脚本语言(代码不进行预编译)
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 一名开发者或设计师通常可以在一秒内指出优秀的设计,但对于糟糕的设计只需最多半
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/8-tips-for-an-awesome-sign
本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 如果我们自己编写从URL中分析和提取元素的代码,那么有可能会比较痛苦
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/4-reasons-to-use-sass-in-y
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/vuejs-3-0-0-beta-features-
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注