webpack打包html
阿新 • • 發佈:2018-12-24
1:確保自己的電腦已經安裝了node和Git軟體
2:自己在盤裡隨便建立一個資料夾一般為英文(也就是你自己的專案名稱)
3:在新建立好的資料夾裡面右鍵點選調出git指令視窗在窗口裡面輸入如下指令:
1:npm install webpack -g
2: npm install webpack-cli -g
3: npm init -y
4: npm install webpack --save-dev
5 npm install html-webpack-plugin (html編譯外掛)
5:把專案拖進編輯器
6新建一個src資料夾 和webpack.config.js
7:webpack.config.js內容配置如下:
const path=require("path"); const webpackHtmlPlugin = require('html-webpack-plugin'); module.exports={ entry:{ index1:'./src/index1.js', index2:'./src/index2.js' }, output:{ path:path.resolve(__dirname,"dist"), filename:"[name].bun.js" }, plugins:[ new webpackHtmlPlugin({ minify:{ collapseWhitespace:true, //清除空格 removeAttributeQuotes:true, //清除多餘引號 removeComments:true //刪除註釋 }, title:"hello", //打包成功後的名字 hash:true, //圖片快取 filename:"index.html" //要打包的html名字 template:"./src/index.html" //要打包的html路徑 }) ] }
8:package.json scripts配置如下:
"scripts": {
"build": "webpack --mode production" //production生產環境 development開發環境
},
9:要打包的html title處需配置
<title><%=htmlWebpackPlugin.options.title%></title>
10:執行命令進行打包 npm run build