国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

我的WebPack入門（二）——html-webpack-plugin

wmui / 1184人閱讀

摘要：可以根據(jù)你設(shè)置的模板，在每次運行后生成對應(yīng)的模板文件，同時所依賴的也都會被引入，如果中含有值，則生成的模板文件也會引入正確版本的文件。

上一節(jié)的入門中，只是跑通了一個很簡單的webpack項目的流程，對其中的參數(shù)以及實戰(zhàn)運用中的一些用法并不太清楚，雖然目前工作項目中并沒有用起webpack，不過覺得還是需要再去摸索一番，以便可以更清楚的用起這個工具。

上一節(jié)最終運行webpack命令，會在dist目錄下生成一個js文件，這時候新建一個index.html文件并引入這個js：

index.html




    
    This is a test



Start:

這中間的f9be197eff25e8667c8c就是上一次運行webpack命令時生成的hash值，如果每次對js改動，然后運行webpack命令，都會引起hash值的變化，也就是說每次都得在index.html中改變引入js的名稱，這樣顯然不合理，這時候可以引入一些插件來進行一些流程上的優(yōu)化。

html-webpack-plugin

html-webpack-plugin可以根據(jù)你設(shè)置的模板，在每次運行后生成對應(yīng)的模板文件，同時所依賴的CSS/JS也都會被引入，如果CSS/JS中含有hash值，則html-webpack-plugin生成的模板文件也會引入正確版本的CSS/JS文件。

安裝（Install） 
npm install html-webpack-plugin --save-dev
引入

在webpack.config.js中引入：

const HtmlWebpackPlugin = require("html-webpack-plugin");
配置 
module.exports = {
    entry: "./app/index.js",
    output: {
        ...
    },
    module: {
        ...
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "This is the result",
            filename: "./index.html",
            template: "./app/index.html",
            inject: "body",
            favicon: "",
            minify: {
                caseSensitive: false,
                collapseBooleanAttributes: true,
                collapseWhitespace: true
            },
            hash: true,
            cache: true,
            showErrors: true,
            chunks: "",
            chunksSortMode: "auto",
            excludeChunks: "",
            xhtml: false
        })
    ]
};

然后看一下這些參數(shù)的意義：

title: 生成的HTML模板的title，如果模板中有設(shè)置title的名字，則會忽略這里的設(shè)置

filename: 生成的模板文件的名字

template: 模板來源文件

inject: 引入模塊的注入位置；取值有true/false/body/head

favicon: 指定頁面圖標；

minify: 是html-webpack-plugin中集成的 html-minifier ，生成模板文件壓縮配置，有很多配置項，可以查看詳細文檔

   caseSensitive: false, //是否大小寫敏感
   collapseBooleanAttributes: true, //是否簡寫boolean格式的屬性如：disabled="disabled" 簡寫為disabled 
   collapseWhitespace: true //是否去除空格

hash: 是否生成hash添加在引入文件地址的末尾，類似于我們常用的時間戳，比如最終引入是：。這個可以避免緩存帶來的麻煩

cache: 是否需要緩存，如果填寫true，則文件只有在改變時才會重新生成

showErrors: 是否將錯誤信息寫在頁面里，默認true，出現(xiàn)錯誤信息則會包裹在一個pre標簽內(nèi)添加到頁面上

chunks: 引入的模塊，這里指定的是entry中設(shè)置多個js時，在這里指定引入的js，如果不設(shè)置則默認全部引入

chunksSortMode: 引入模塊的排序方式

excludeChunks: 排除的模塊

xhtml: 生成的模板文檔中標簽是否自動關(guān)閉，針對xhtml的語法，會要求標簽都關(guān)閉，默認false

我的WebPack入門（一）

[3]

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/81963.html

相關(guān)文章

  • webpack入門學(xué)習(xí)手記（一）

    摘要：爭取早日能完全拋棄掉中文文檔，最終可以翻譯英文文檔，輸出英文文檔。待續(xù)相關(guān)文章入門學(xué)習(xí)手記一入門學(xué)習(xí)手記二入門學(xué)習(xí)手記三入門學(xué)習(xí)手記四 本人微信公眾號：前端修煉之路，歡迎關(guān)注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用過gulp、grunt，但是一直沒有學(xué)習(xí)過webpack。這兩天剛好有時間，學(xué)習(xí)了下...

    mengera88 評論0 收藏0

  • React入門：從零搭建一個React項目

    摘要：一初始化項目新建文件夾，文件名文件夾名稱不要用，這類關(guān)鍵字，后面使用插件時會發(fā)生錯誤。未設(shè)置會報一個警告。四在項目中使用安裝。 一、初始化項目 新建文件夾，文件名firstreact 文件夾名稱不要用react，node這類關(guān)鍵字，后面使用插件時會發(fā)生錯誤。 init項目環(huán)境，項目信息可默認或自行修改 mkdir firstreact cd firstreact npm ...

    stackvoid 評論0 收藏0

  • wepback入門到放棄

    摘要：四配置配置規(guī)則放在的數(shù)組里，每個是一個對象，是正則匹配，匹配文件后綴名，是要用是數(shù)組是所需要的是要加載哪些文件，是忽略掉哪些文件。實現(xiàn)解析，用會在寫入在文件頂端導(dǎo)入中加入插件。 最近研究webpack略有小成，特此寫篇博客。雖然webpack有官網(wǎng)api,但是個人認為webpack api一點都不人性化， 不自己研究研究，根本看不懂。今天先從寫webpack-dev-server開始。...

    blastz 評論0 收藏0

  • React入門0x001: 環(huán)境配置和 helloworld

    摘要：概述開坑系列文章，不知道會寫到什么程度，畢竟寫文章并不在行，存在當做筆記做，先不講理論，實踐先行。 0x000 概述 開坑 react 系列文章，不知道會寫到什么程度，畢竟寫文章并不在行，存在當做筆記做，先不講理論，實踐先行。 0x001 創(chuàng)建項目 $ mkdir 0x001-helloworld $ cd 0x001-helloworld $ yarn init -y 0x0002 ...

    yibinnn 評論0 收藏0

  • Webpack系列—快速入門

    摘要：如使用插件為我們自動生成一個文件。安裝使用生產(chǎn)和開發(fā)構(gòu)建分離生產(chǎn)和開發(fā)中的構(gòu)建肯定是不同，生產(chǎn)中側(cè)重于一個更好的開發(fā)體驗，而生產(chǎn)環(huán)境中則需要更多的性能優(yōu)化，更小的。可以指定命令運行以來的配置文件，通過在中寫入是一種不錯的方式。 原文地址：https://github.com/huruji/blog/issues/3 入口 單文件入口指定entry鍵值 const config = { ...

    TIGERB 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<