Webpack4教程-第三部分，如何使用插件-創(chuàng)新互聯(lián)

轉載請注明出處：葡萄城官網(wǎng)，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務，賦能開發(fā)者。
原文出處：https://wanago.io/2018/07/23/webpack-4-course-part-three-working-with-plugins/
網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、微信小程序定制開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了貴陽免費建站歡迎大家使用！

大家好！今天我們介紹插件這個概念。插件與loader的不同之處在于它能完成更復雜的任務?；旧?，loader做不了的其他事情，就可以用插件來做。loader往往作用于某種特定類型的文件，而插件則更加通用。這次，我們來學習如何使用插件，看看它解決了什么問題。本文會涉及一些日常用例，比如，生成鏈接了所有資源的HTML，以及把CSS抽取為單獨的文件。

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

使用插件最基本的方法是把它們放在配置文件中的plugins屬性下。你需要調用new操作符創(chuàng)建一個插件的實例。

若想知道更多關于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文件夾下面創(chuàng)建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新建一個實例。這是因為你能夠不止一次地使用同一個插件。

當創(chuàng)建多頁面應用時，你可能需要不止一個HTML模板文件。

如果你想了解更多關于entry和output的內容，以及如何使用它們創(chuàng)建多文件應用，可參考我們的第一節(jié)課。

這可以通過多次使用HtmlWebpackPlugin來實現(xiàn)。

// 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數(shù)組對入口點（entry point）進行匹配。根據(jù)上面的配置運行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一并使用。雖然這里只是一部分插件的用例，但其他插件的使用方法也是類似的。你可查看官方的插件列表來尋找你需要的插件。你也可以使用搜索引擎去發(fā)現(xiàn)更多。Webpack本身就是基于同樣的一套插件系統(tǒng)來構建的，所以學習它們在底層是如何工作的會很有趣。我們將在以后討論這些，屆時去實現(xiàn)我們自己的插件。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

標題名稱：Webpack4教程-第三部分，如何使用插件-創(chuàng)新互聯(lián)
鏈接分享：http://bm7419.com/article8/diopip.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、軟件開發(fā)、網(wǎng)站策劃、App開發(fā)、手機網(wǎng)站建設、企業(yè)網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容