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

時間 2019-11-11

標籤 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-plugingithub

它使用起來很方便：web

// webpack.config.jsnpm

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自己就是基於一樣的一套插件系統來構建的，因此學習它們在底層是如何工做的會頗有趣。咱們將在之後討論這些，屆時去實現咱們本身的插件。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。