欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

轉(zhuǎn)載請(qǐng)注明出處：葡萄城官網(wǎng)，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務(wù)，賦能開發(fā)者。
原文出處：https://wanago.io/2018/07/23/webpack-4-course-part-three-working-with-plugins/

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了貴陽(yáng)免費(fèi)建站歡迎大家使用！

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

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

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

若想知道更多關(guān)于new關(guān)鍵字和原型的，請(qǐng)查看原型，ES6 class背后的大哥。

html-webpack-plugin

手動(dòng)的把所有JavaScript文件添加到HTML里是件很繁重的事情。幸好你不必那樣做！這有一個(gè)非常有用的插件HtmlWebpackPlugin。

npm install html-webpack-plugin

它使用起來(lái)很方便：

// webpack.config.js

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

module.exports = {

 plugins: [

    new HtmlWebpackPlugin()

 ]

};

它將會(huì)為我們?cè)赿ist文件夾下面創(chuàng)建index.html文件。我們的JavaScript文件會(huì)以鏈接形式插入在<body>標(biāo)簽后面。

你需要自己追蹤插入HTML的文件，而當(dāng)它們變多時(shí)，這就很繁瑣了。此插件則簡(jiǎn)化了這件事情。

另一件值得注意的重要事情就是，你的外鏈文件名可能會(huì)因?yàn)榇虬鼤r(shí)使用哈希而改變。這就讓HtmlWebpackPlugin更加有用了，因?yàn)槟悴恍枰謩?dòng)追蹤那些文件名。這個(gè)機(jī)制被用來(lái)應(yīng)對(duì)瀏覽器的緩存。我們會(huì)在后面的課程討論這個(gè)話題。

給插件傳遞配置

你可以給插件傳遞更多的配置。下面是一個(gè)為HtmlWebpackPlugin傳入一個(gè)HTML模板的例子：

// webpack.config.js

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

module.exports = {

 plugins: [

    new HtmlWebpackPlugin({template: './src/index.html'})

 ]

};

有了它，插件就不再使用默認(rèn)的HTML文件，而會(huì)使用你提供給它的那個(gè)。 可以在這個(gè)庫(kù)看到更多的配置項(xiàng)。

把同一個(gè)插件使用多次

你可能會(huì)好奇，為什么我們每次使用插件，都要用new新建一個(gè)實(shí)例。這是因?yàn)槟隳軌虿恢挂淮蔚厥褂猛粋€(gè)插件。

當(dāng)創(chuàng)建多頁(yè)面應(yīng)用時(shí)，你可能需要不止一個(gè)HTML模板文件。

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

這可以通過多次使用HtmlWebpackPlugin來(lái)實(shí)現(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']

   })

 ]

};

插件的實(shí)例，會(huì)基于chunks數(shù)組對(duì)入口點(diǎn)（entry point）進(jìn)行匹配。根據(jù)上面的配置運(yùn)行Webpack，會(huì)得到：one.html，tow.html，one.bundle.js，two.bundle.js。

插件和loader并用

在之前的教程里，我們把css-loader和style-loader結(jié)合起來(lái)，并把輸出的css代碼插入<style>標(biāo)簽。你可能傾向于輸出真正的css的文件給用戶。如果那樣的話，需要使用mini-css-extract-plugin。

在過去，我們?cè)褂?ExtractTextWebpackPlugin 來(lái)做這件事情。但從Webpack 4 開始就不應(yīng)該再使用它了。若想了解更多，參見這里。

這里演示了怎么做：

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，自動(dòng)生成的css文件被插入到HTML中。你會(huì)得到像下面這樣的輸出：

<!-- 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>

以上面的配置運(yùn)行Webpack，每個(gè)包含CSS導(dǎo)入的JavaScript文件都將得到一個(gè)CSS輸出文件。若想改變這種行為，需要使用SplitChunksPlugin，我們將會(huì)在另一個(gè)教程里學(xué)習(xí)它。你也可以在官方文檔里找到操作說明。

總結(jié)

今天我們學(xué)習(xí)了什么是插件，及其基本使用方法。不僅如此，我們還學(xué)習(xí)了如何給插件傳遞配置項(xiàng)，以及如何將它們與loader一并使用。雖然這里只是一部分插件的用例，但其他插件的使用方法也是類似的。你可查看官方的插件列表來(lái)尋找你需要的插件。你也可以使用搜索引擎去發(fā)現(xiàn)更多。Webpack本身就是基于同樣的一套插件系統(tǒng)來(lái)構(gòu)建的，所以學(xué)習(xí)它們?cè)诘讓邮侨绾喂ぷ鞯臅?huì)很有趣。我們將在以后討論這些，屆時(shí)去實(shí)現(xiàn)我們自己的插件。

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

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

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

廣告

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

h5響應(yīng)式網(wǎng)站建設(shè)