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

成都創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的成都網(wǎng)站制作、成都網(wǎng)站建設(shè)，網(wǎng)站設(shè)計，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十余年品質(zhì)，值得信賴！1、html文件的打包

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

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

  plugins:[
         new htmlPlugin({
            minify：{
                removeAttributeQuotes:true       //對html進行壓縮，去掉屬性的雙引號
            },
            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進行打包

• 在終端輸入 npm run dev 在瀏覽器中運行

• plugins里面配置如下：

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

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

• 配置html

感謝各位的閱讀！看完上述內(nèi)容，你們對html文件打包的方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

網(wǎng)頁名稱：html文件打包的方法-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://www.chinadenli.net/article8/ijoip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、面包屑導(dǎo)航、移動網(wǎng)站建設(shè)、軟件開發(fā)、網(wǎng)頁設(shè)計公司、營銷型網(wǎng)站建設(shè)

廣告

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