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

資訊專欄INFORMATION COLUMN

[js高手之路]深入淺出webpack教程系列4-插件使用之html-webpack-plugin配

qpal / 2261人閱讀

摘要：還記得我們上文中的文件嗎那里面的標簽還是寫死的文件，那么怎么把他們變成動態的文件，這個動態生成的文件會動態引入我們打包后生成的文件呢，我們可以使用插件，首先安裝這個插件，好的，接下來就開始用這個插件了官方參考文檔插件通用用法

還記得我們上文中的index.html文件嗎? 那里面的script標簽還是寫死的index.bundle.js文件，那么怎么把他們變成動態的index.html文件，這個動態生成的index.html文件會動態引入我們打包后生成的js文件呢？，我們可以使用插件html-webpack-plugin，首先安裝這個插件npm install html-webpack-plugin --save-dev，好的，接下來就開始用這個插件了

官方參考文檔：

插件通用用法：https://webpack.js.org/config...

html-webpack-plugin插件用法：https://webpack.js.org/plugin...

html-webpack-plugin插件配置：https://github.com/jantimon/h...

一、首先，我們需要在配置文件webpack.dev.config.js中，引入插件

var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry : {
        main : "./src/js/main.js",
        calc : "./src/js/calc.js"
    },
    output : {
        //__dirname，就是當前webpack.config.js文件所在的絕對路徑
        path : __dirname + "/dist", //輸出路徑，要用絕對路徑
        filename : "[name]-[hash].bundle.js" //打包之后輸出的文件名
    },
    plugins: [new HtmlWebpackPlugin()]
};

然后執行npm run d打包命令，就能在dist目錄下動態生成index.html文件，而且引入了2個動態打包生成的js文件，這個時候刷新index.html文件，就能看到js函數執行的結果了

二、但是，這個在dist目錄下面新生成的html文件，跟我們的項目目錄(demo2)下面的index.html文件并沒有任何關聯， 顯然不符合實際的項目需求，那我們想要的結果應該是根據demo2下面的index.html這個文件，為模板生成dist目錄下面的index.html文件，這樣就把兩個文件建立起了關聯，我們只需要在配置文件webpack.dev.config.js中，給html-webpack-plugin的構造函數傳入template模板即可

 var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry : {
        main : "./src/js/main.js",
        calc : "./src/js/calc.js"
    },
    output : {
        //__dirname，就是當前webpack.config.js文件所在的絕對路徑
        path : __dirname + "/dist", //輸出路徑，要用絕對路徑
        filename : "[name]-[hash].bundle.js" //打包之后輸出的文件名
    },
    plugins: [new HtmlWebpackPlugin(
        {
            template : "./index.html"
        }
    )]
};

template:就是以demo目錄下的這個index.html文件為模板生成dist/index.html文件，然后執行npm run d打包命令就能重新生成了

三、但是還有個小問題，我們上面打包生成的index.html文件和js文件是在同一個目錄，在大型項目里面管理肯定很混亂，我們希望生成的.html文件和js文件分開存放，我們可以在webpack.dev.config.js文件中的filename配置中，加一個目錄js（js文件放在這個目錄下面），把他們分開就可以了，配置完了，不要忘記執行打包命令(npm run d)

var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry : {
        main : "./src/js/main.js",
        calc : "./src/js/calc.js"
    },
    output : {
        //__dirname，就是當前webpack.config.js文件所在的絕對路徑
        path : __dirname + "/dist", //輸出路徑，要用絕對路徑
        filename : "js/[name]-[hash].bundle.js" //打包之后輸出的文件名
    },
    plugins: [new HtmlWebpackPlugin(
        {
            template : "./index.html"
        }
    )]
};

四、插件的配置選項：inject與filename
webpack.dev.config.js配置文件:



var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry : {
        main : "./src/js/main.js",
        calc : "./src/js/calc.js"
    },
    output : {
        //__dirname，就是當前webpack.config.js文件所在的絕對路徑
        path : __dirname + "/dist", //輸出路徑，要用絕對路徑
        filename : "js/[name]-[hash].bundle.js" //打包之后輸出的文件名
    },
    plugins: [new HtmlWebpackPlugin(
        {
            template : "./index.html",
            filename : "index-[hash].html",
            inject : "head"
        }
    )]
};

filename：打包生成的文件名，還可以加目錄，默認沒有寫的時候是index.html

inject：有4個值: true | "head" | "body" | false

如果設置為head, 就是把js引入放在head標簽里面, 如果設置為body，就是把js引入放在body里面， false: 不會引入js文件 true:引入js文件

五、插件的選項：title

title: 模板的標題

webpack.dev.config.js配置文件代碼:

var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry : {
        main : "./src/js/main.js",
        calc : "./src/js/calc.js"
    },
    output : {
        //__dirname，就是當前webpack.config.js文件所在的絕對路徑
        path : __dirname + "/dist", //輸出路徑，要用絕對路徑
        filename : "js/[name]-[hash].bundle.js" //打包之后輸出的文件名
    },
    plugins: [
        new HtmlWebpackPlugin({
            template : "./index.html",
            title : "ghostwu教你學webpack",
            inject : true
        })
    ]
};

然后，在demo2目錄下面的index.html文件中用ejs模板語法引入title

    


    
    
    
    <%= htmlWebpackPlugin.options.title %>

注意是：htmlWebpackPlugin.options.title，不要把html的h大寫， 千萬注意，我在這里踩了好久的坑

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91834.html

相關文章

  • [js高手之路]深入淺出webpack教程系列5-插件使用之html-webpack-plugin配

    摘要：上文我們講到了的配置和獲取數據的方式，本文，我們繼續深入的配置一插件中的除了自己定義了一些基本配置外，我們是可以任意的添加自定義的數據文件，就是當前文件所在的絕對路徑輸出路徑，要用絕對路徑打包之后輸出的文件名教你學我們在中新增了個 上文我們講到了options的配置和獲取數據的方式，本文，我們繼續深入options的配置 一、html-webpack-plugin插件中的options...

    lentoo 評論0 收藏0

  • [js高手之路]深入淺出webpack教程系列6-插件使用之html-webpack-plugin配

    摘要：上文我們對的實例進行了遍歷分析，講解了幾個常用屬性以及自定義屬性的添加，本文，我們繼續深入他的配置選項的探討一選項這個屬性非常有用，可以指定某個頁面加載哪些如文件我們可以用他做多個頁面模板的生成比如，我們在實際開發中，做一個博客網站，一 上文我們對html-webpack-plugin的實例htmlWebpackPlugin進行了遍歷分析，講解了幾個常用屬性( inject, mini...

    jokester 評論0 收藏0

  • [js高手之路]深入淺出webpack教程系列2-配置文件webpack.config.js詳解(上

    摘要：接著上文，重新在文件夾下面新建一個項目文件夾，然后用初始化項目的配置文件，然后安裝，然后創建基本的項目文件夾結構，好了，我們的又一個基本項目結構就搭建好了第一開始通過文件配置我們的項目首先在項目文件夾下面，新建一個文件，這個文件可 接著上文，重新在webpack文件夾下面新建一個項目文件夾demo2，然后用npm init --yes初始化項目的package.json配置文件，然后安...

    moven_j 評論0 收藏0

  • [js高手之路]深入淺出webpack教程系列3-配置文件webpack.config.js詳解(下

    摘要：本文繼續接著上文，繼續寫下的其他配置用法一把兩個文件打包成一個，怎么配置在上文中的中，用數組配置文件代碼，就是當前文件所在的絕對路徑輸出路徑，要用絕對路徑打包之后輸出的文件名然后在目錄下面新建一個文件，代碼如下之前的文件的代碼告訴你怎么學習 本文繼續接著上文，繼續寫下webpack.config.js的其他配置用法. 一、把兩個文件打包成一個，entry怎么配置? 在上文中的webpa...

    xiangchaobin 評論0 收藏0

  • [js高手之路]深入淺出webpack教程系列1-安裝與基本打包用法和命令參數

    摘要：，我想大家應該都知道或者聽過，是前端一個工具可以讓各個模塊進行加載預處理再進行打包。 webpack，我想大家應該都知道或者聽過，Webpack是前端一個工具,可以讓各個模塊進行加載,預處理,再進行打包。現代的前端開發很多環境都依賴webpack構建，比如vue官方就推薦使用webpack.廢話不多說，我們趕緊開始吧. 第一步、安裝webpack 新建文件夾webpack->再在web...

    pubdreamcc 評論0 收藏0

發表評論

0條評論

qpal

男|高級講師

TA的文章

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