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

时间 2019-12-07

标签 webpack4 webpack 教程第三部分如何使用插件繁體版

原文原文链接

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
原文出处：https://wanago.io/2018/07/23/webpack-4-course-part-three-working-with-plugins/javascript

你们好！今天咱们介绍插件这个概念。插件与loader的不一样之处在于它能完成更复杂的任务。基本上，loader作不了的其余事情，就能够用插件来作。loader每每做用于某种特定类型的文件，而插件则更加通用。此次，咱们来学习如何使用插件，看看它解决了什么问题。本文会涉及一些平常用例，好比，生成连接了全部资源的HTML，以及把CSS抽取为单独的文件。css

Webpack 4教程 - 第三部分如何使用插件html

使用插件最基本的方法是把它们放在配置文件中的plugins属性下。你须要调用new操做符建立一个插件的实例。java

若想知道更多关于new关键字和原型的，请查看原型，ES6 class背后的大哥。webpack

html-webpack-plugingit

手动的把全部JavaScript文件添加到HTML里是件很繁重的事情。幸亏你没必要那样作！这有一个很是有用的插件HtmlWebpackPlugin。es6

npm install html-webpack-plugin

它使用起来很方便：github

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin()
  ]
};

它将会为咱们在dist文件夹下面建立index.html文件。咱们的JavaScript文件会以连接形式插入在<body>标签后面。web

你须要本身追踪插入HTML的文件，而当它们变多时，这就很繁琐了。此插件则简化了这件事情。npm

另外一件值得注意的重要事情就是，你的外链文件名可能会由于打包时使用哈希而改变。这就让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自己就是基于一样的一套插件系统来构建的，因此学习它们在底层是如何工做的会颇有趣。咱们将在之后讨论这些，届时去实现咱们本身的插件。