webpack - 自動化生成項目中的html頁面(上)

1.安裝插件html-webpack-plugin

在終端輸入指令如下：

cnpm install html-webpack-plugin –save-dev

2.進入webpack.config.js，加入一行代碼，引用該插件，

var htmlWebpackPlugin = require('html-webpack-plugin');

同時寫入plugins屬性，對插件進行初始化

plugins:[
        new htmlWebpackPlugin()
 ]

webapack.config.js整個檔案的代碼如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:{                             //打包入口檔案
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist/js',    //打包後的檔案路徑
        filename:'[name]-[chunkhash].js'            //打包後的檔案名
    },
    plugins:[
        new htmlWebpackPlugin()
    ]
}

3.在終端輸入cnpm run webpack，終端顯示如下：

> webpack --config webpack.config.js --progress --display-modules --colors --display-reasons

Hash: ef1b55065f0a3523bcb2
Version: webpack 
Time: ms
                       Asset       Size  Chunks             Chunk Names
main-a5e227fe8eda86.js      kB         [emitted]  main
   a-dd37ebe6becb90deb4b.js     kB         [emitted]  a
                  index.html   bytes          [emitted]
   [] ./src/script/main.js  bytes {} [built]
   [] ./src/script/a.js  bytes {} [built]
Child html-webpack-plugin for "index.html":
      asset
       [] ./node_modules/_html-webpack-plugin@2@html-webpack-plugin/lib/loader.js!./node_modules/_html-webpack-plugi
n@2@html-webpack-plugin/default_index.ejs  bytes {} [built]
       [] ./node_modules/_lodash@4@lodash/lodash.js  kB {} [built]
           cjs require ../_lodash@4@lodash/lodash.js [] ./node_modules/_html-webpack-plugin@2@html-webpack-plug
in/lib/loader.js!./node_modules/_html-webpack-plugin@2@html-webpack-plugin/default_index.ejs :-
       [] (webpack)/buildin/global.js  bytes {} [built]
           cjs require global [] ./node_modules/_lodash@4@lodash/lodash.js :-
       [] (webpack)/buildin/module.js  bytes {} [built]
           cjs require module [] ./node_modules/_lodash@4@lodash/lodash.js :-

其中有這麼一句，

Child html-webpack-plugin for "index.html":

表示生效了！進入dist/js檔案夾，發現多了個index.html檔案，index.html内容截圖如下：

webpack - 自動化生成項目中的html頁面(上)

我們發現裡面對我們的js檔案進行了引用，而在這裡我們卻不需要自己手動填寫類似

的打包後的檔案

4.細心的小夥可能已經發現了，打包後雖然生成了一個index.html檔案，但是該檔案是在dist/js路徑下，而根目錄下卻是我們一開始就建立的index.html檔案，那麼怎麼才能在這2個檔案之間，建立某種聯系呢，進而符合我們的開發需求呢？？别怕，其實我們可以這樣做。看第5.吧

webpack - 自動化生成項目中的html頁面(上)

5.對進入webpack.config.js檔案，對html-webpack-plugin插件配置參數，代碼如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:{                             //打包入口檔案
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist/js',    //打包後的檔案路徑
        filename:'[name]-[chunkhash].js'            //打包後的檔案名
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意傳的參數是一個對象
            template:'index.html'   //傳一個模闆，就是根目錄下的index.html
        })
    ]
}

但是這裡有一個疑問，為什麼

template:'index.html'

會指向根目錄下的index.html呢，這裡其實涉及到一個上下文的概念。在我們的配置裡面會有一個

context

這個屬性，這個屬性代表的意思就是整個運作環境的上下文，預設值就是運作這個腳本的目錄，即根目錄。

6.再次進入終端，輸入指令運作,cnpm run webpack

7.首先我們看下原根目錄下的index.html檔案，源碼如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta标簽*必須*放在最前面，任何其他内容都*必須*跟随其後！ -->
    <title></title>


  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

接着再來看下dist/js/index.html打包後的html檔案，源碼如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta标簽*必須*放在最前面，任何其他内容都*必須*跟随其後！ -->
    <title></title>


  </head>
  <body>
    <script src="bundle.js"></script>
  <script type="text/javascript" src="main-634594a5e227fe8eda86.js"></script><script type="text/javascript" src="a-2dd37ebe6becb90deb4b.js"></script></body>
</html>

沒錯，打包後的檔案就是原目錄的index.html檔案為模闆建立的，，這樣就建立起了打包後的檔案和未打封包件之間的聯系。但是這裡還是有一個問題？所有生成的打封包件都在我們的dist/js目錄下，其實這并不符合我們生産的實際要求。我們希望生成的打封包件index.html能夠在js檔案夾之外，首先我們想想為什麼會發生這種事情，看下webpack.config.js檔案你就明白啦，

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry:{                             //打包入口檔案
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist/js',    //打包後的檔案路徑
        filename:'[name]-[chunkhash].js'            //打包後的檔案名
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意傳的參數是一個對象
            template:'index.html'   //傳一個模闆，就是根目錄下的index.html
        })
    ]
}

在webpack.config.js配置檔案裡面，打包後的檔案路徑為

path:__dirname + '/dist/js',

這也正是為什麼所有打包後的檔案都會在dist/js目錄下的原因了，很簡單啦，接下來改目錄就可以了，老規矩，看第8.吧

8.修改webpack.config.js檔案，修改後的檔案代碼如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry:{                             //打包入口檔案
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist',    //打包後的檔案路徑
        filename:'js/[name]-[chunkhash].js'            //打包後的檔案名
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意傳的參數是一個對象
            template:'index.html'   //傳一個模闆，就是根目錄下的index.html
        })
    ]
}

注意這2行代碼：

設定打包後的檔案的輸出路徑在dist檔案夾下，但是我們希望js檔案仍舊能夠在dist/js檔案夾裡面，是以我們修改成這樣，

指定js目錄

9.好了接下來是見證奇迹的時刻，在終端輸入指令，

cnpm run webpack

10.看圖說話，見我紅色标注出來的沒有啊，打包後的index.html位于dist檔案夾下，而打包後的js檔案依舊在dist/js檔案夾下，這樣正好符合我們的需求。

webpack - 自動化生成項目中的html頁面(上)

11.當然html-webpack-plugin這個插件，還可以配置别的參數，打開webpack.config.js檔案，代碼如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry:{                             //打包入口檔案
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist',    //打包後的檔案路徑
        filename:'js/[name]-[chunkhash].js'            //打包後的檔案名
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意傳的參數是一個對象
            filename:'index-[hash].html',
            template:'index.html'   //傳一個模闆，就是根目錄下的index.html
        })
    ]
}

filename:'index-[hash].html',

該行代碼可以指定打包輸出後的html檔案的檔案名是有檔案名index+哈希值組成，看截圖，對了，在這之前不要忘了再次打包哦，在終端輸入cnpm run webpack，最後結果如下！

webpack - 自動化生成項目中的html頁面(上)

12.我們還可以設定打包後的檔案是放在head标簽中呢還是body标簽中，

webpack.config.js檔案修改代碼如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry:{                             //打包入口檔案
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist',    //打包後的檔案路徑
        filename:'js/[name]-[chunkhash].js'            //打包後的檔案名
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意傳的參數是一個對象
            filename:'index-[hash].html',
            template:'index.html',   //傳一個模闆，就是根目錄下的index.html
            inject:'head'
        })
    ]
}

在這裡我們增加一行代碼

inject:'head'

表示我們将打包後的js檔案放在head标簽裡，在終端輸入cnpm run webpack，打包後檢視dist下的html檔案，html内容如下，大功告成啦！

webpack - 自動化生成項目中的html頁面(上)

webpack - 自動化生成項目中的html頁面(上)

繼續閱讀

Vue項目 - 單檔案元件和Vue中的路由

龍珠訓練營task04

修改Linux系統使用者權限

趕工心得（一）

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

CSS之折疊菜單

ansible配置檔案說明及ad hoc指令

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden

用mybatis的generator插件在項目中自動生成dao及entity

vue-cli簡介（中文翻譯）