webpack4打包html,html-webpack-plugin详解
生活随笔
收集整理的這篇文章主要介紹了
webpack4打包html,html-webpack-plugin详解
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
打包html使用插件:html-webpack-plugin
安裝
npm i --save-dev html-webpack-plugin
配置文件
const path = require("path"); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {entry: __dirname+"/src/index.js", //入口文件,從項(xiàng)目根目錄指定output: { //輸出路徑和文件名,使用path模塊resolve方法將輸出路徑解析為絕對(duì)路徑publicPath: __dirname + "/build", // js引用路徑或者CDN地址path: path.resolve(__dirname, "build"), //打包后的js文件存放的地方 將js文件打包到build的目錄filename: "main.js" //打包后輸出的js的文件名 將入口文件index.js打包到build/main.js},devServer: {contentBase: './build',//默認(rèn)webpack-dev-server會(huì)為根文件夾提供本地服務(wù)器,如果想為另外一個(gè)目錄下的文件提供本地服務(wù)器,應(yīng)該在這里設(shè)置其所在目錄(本例設(shè)置到"build"目錄)historyApiFallback: true,//在開(kāi)發(fā)單頁(yè)應(yīng)用時(shí)非常有用,它依賴(lài)于HTML5 history API,如果設(shè)置為true,所有的跳轉(zhuǎn)將指向index.htmlinline: true,//設(shè)置為true,當(dāng)源文件改變時(shí)會(huì)自動(dòng)刷新頁(yè)面port: 8080//設(shè)置默認(rèn)監(jiān)聽(tīng)端口,如果省略,默認(rèn)為"8080"},plugins: [new HtmlWebpackPlugin({title: 'Custom template',template: './src/index.html', //指定要打包的html路徑和文件名filename:'../index.html' ,//指定輸出路徑和文件名 favicon:'./src/img/apple-touch-icon.png',//給生成的 html 文件生成一個(gè)標(biāo)簽<link rel="shortcut icon" href="apple-touch-icon.png">hash: true,//給生成的 js 文件一個(gè)獨(dú)特的 hash 值 <script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>showErrors:true,//webpack 編譯出現(xiàn)錯(cuò)誤minify:{//對(duì) html 文件進(jìn)行壓縮,minify 的屬性值是一個(gè)壓縮選項(xiàng)或者 false 。默認(rèn)值為false, 不對(duì)生成的 html 文件進(jìn)行壓縮removeComments:true, // 去除注釋collapseWhitespace: true //是否去除空格}})] }index.html
在html的title處填寫(xiě)<title><%= htmlWebpackPlugin.options.title %></title>打包后會(huì)自動(dòng)附上new HtmlWebpackPlugin方法里面的title的值
《新程序員》:云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作,文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的webpack4打包html,html-webpack-plugin详解的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: git处理换行符问题,webstorm设
- 下一篇: webpack4-- 处理html中引入