html文件打包的方法

html文件打包的方法？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

1、html文件的打包

• 把dist目錄下面的index.html剪切復(fù)制到src目錄下，index.html里面引入的js代碼可以刪除掉（會(huì)自動(dòng)引入js代碼），這就是模板文件

• 在webpack-config.js里面引入插件

   plugins:[
         new htmlPlugin({
            minify：{
                removeAttributeQuotes:true       //對(duì)html進(jìn)行壓縮，去掉屬性的雙引號(hào)
            },
            hash:true,      //為了開發(fā)中js有緩存效果，加入hash可以有效避免緩存JS
            template:'./src/index.html'      //是要打包的html模板路徑和文件名稱
        })
      ]

  i ?wds?: Project is running at http://10.212.109.18:8087/
   i ?wds?: webpack output is served from /
   i ?wds?: Content not from webpack is served from F:\webLearn\webpackLearn\dist
   ? ?wdm?: Hash: 027dd749b565ba3b200d
   Version: webpack 4.15.1
   Time: 3008ms
   Built at: 2018-07-11 08:49:13
    Asset       Size  Chunks             Chunk Names
   entry2.js    139 KiB       0  [emitted]  entry2
   entry.js    145 KiB       1  [emitted]  entry index.html  427 bytes          [emitted]
   Entrypoint entry = entry.js
   Entrypoint entry2 = entry2.js

  出現(xiàn)上述代碼即成功

• 如下所示即打包成功
  

  Hash: 40112e2b8d4dc81b512b
  Version: webpack 4.15.1
  Time: 5299ms
  Built at: 2018-07-11 08:47:26
  Asset       Size  Chunks             Chunk Names
  entry2.js  962 bytes       0  [emitted]  entry2
  entry.js   6.75 KiB       1  [emitted]  entry
  index.html  427 bytes          [emitted]
  [0] ./src/entry2.js 33 bytes {0} [built]
  [4] ./node_modules/css-loader!./src/css/index.css 227 bytes {1} [built]
  [5] ./src/css/index.css 1.06 KiB {1} [built]
  [6] ./src/entry.js 94 bytes {1} [built]
  + 3 hidden modules
  
  WARNING in configuration
  The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
  You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
  Child html-webpack-plugin for "index.html": 1 asset
  [0] (webpack)/buildin/module.js 497 bytes {0} [built]
  [1] (webpack)/buildin/global.js 489 bytes {0} [built]
  [3] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 511 bytes {0} [built]
  + 1 hidden module

• 把dist目錄刪掉   ，在終端輸入webpack進(jìn)行打包

• 在終端輸入 npm run dev 在瀏覽器中運(yùn)行

• plugins里面配置如下：

• const htmlPlugin=require(‘html-webpack-plugin’);

• 在終端里面進(jìn)行安裝：npm install –save-dev html-webpack-plugin

• 配置html
  

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)html文件打包的方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。