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本身自己也是創建在一樣插件系統之上的，瞭解其底層如何工做是件有趣的事情。咱們將在之後實現一個咱們本身的插件。