Webpack 4 教程 - 3 . 使用插件

时间 2019-12-07

标签 webpack 教程使用插件繁體版

原文原文链接

Hello！今天咱们介绍插件的概念。某种程度上来讲，与加载器不一样的是插件可以处理更大范围内的任务。基本上，它们能作加载器不能作的任何事情。加载器每每囿于必定类型的文件，而插件就普适得多了。这一回咱们将学习loader（译注：原文如此，理应为plugins）服务的目的以及如何使用它们。咱们将触及到一个真实的例子，这个例子中咱们生成带有资源连接的HTML文件，以及抽离css到分离的文件中。javascript

Webpack 4 教程：插件，如何使用？

use loaders（译注：原文如此，理应为 use plugins）最基本的方式是把它们放到咱们的配置的plugins属性中。你须要调用new操做符来生成一个插件的实例。css

若是你要对new关键字及原型了解更多，请参阅 Prototype. The big bro behind ES6 class

html-webpack-plugin

手工在HTML中添加JavaScripts文件非常繁琐。谢天谢地，你并没必要这么作！这里有一个叫HtmlWebpackPlugin的很好用的插件。html

npm install html-webpack-plugin

很是容易使用：java

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

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

这将给咱们建立一个index.html文件，并把其放在dist目录中。咱们输出的javascript代码将连接在<body>标签的尾部。webpack

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="main.js"></script></body>
</html>

这就方便了，尤为在你的文件数增加得愈来愈多的时候。由于（手工的话）你不得不跟踪每一个文件并将它们放到HTML中。git

另一个重要的事情就是在使用hash的状况下，你的文件名能够被更改。这让HtmlWebpackPlugin变得更有用了，由于你没必要跟踪文件名了。引入这个机制是为了应付浏览器的缓存（效应）。在接下来的教程中，咱们将更多的覆盖这个主题。es6

给插件传递可选参数

你能够给插件传递可选参数。这里有一个给HtmlWebpackPlugin传递模板（template）可选项的例子：github

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
};

这样，就再也不建立一个默认的HTML文件了，而是使用你提供的。了解更多可选参数的意义，请参考仓库。web

屡次使用同一个插件

你可能想知道每次使用插件时为何要用new关键字。这是由于使得你能屡次使用同一个插件这一事实。npm

当建立多页应用时，你可能须要输出多个HTML文件。

若是你想了解更多的如何经过入口和输出来建立多页应用，请参阅本教程的第1部分

为此，可经过屡次使用HtmlWebpackPlugin插件来实现

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

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属性的值与入口点来匹配。运行上面这个配置将生成这些文件： one.html,
two.html, one.bundle.js, two.bundle.js.

插件与加载器一块工做

在上一节的教程中，咱们结合css-loader和style-loader把css代码插入到<style>标签里。你可能更喜欢给你的用户提供一个实际的css文件。要这么作，使用mini-css-extract-plugin.

在Webpack版本4之前，咱们使用ExtractTextWebpackPlugin插件来作这件事，但从4开始，不这么干了，想知道得更多请参读 issue。

你要这么作：

npm install mini-css-extract-plugin

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new MiniCssExtractPlugin()
    ]
}

// index.js

import './styles.css';

因为HtmlWebpackPlugin的做用, 生成的css文件将被自动插入到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文件都导入它。要改变这种行为须要使用SplitChunksPlugin插件，咱们在后面部分的教程中涉及它。你能够在官方文档找到如何这么作的说明。

小结

今天咱们涉及到了loaders（译注：原文如此，理应为plugins，我再次疑惑）是什么，以及学习了使用它们的基本方式。不仅如此，咱们也学习了如何给它们传递附加选项参数，以及如何让其与加载器协同工做。尽管这里只是举了一个插件的例子，但使用其它插件都是相似的。更多可用的插件请参阅官方的插件列表。这个列表太多了，使用搜索引擎去找吧。由于webpack本身自己也是创建在一样插件系统之上的，了解其底层如何工做是件有趣的事情。咱们将在之后实现一个咱们本身的插件。