webpack打包之配置服務
阿新 • • 發佈: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編譯外掛)
6:npm install clean-webpack-plugin
6.1 npm install webpack-dev-server (服務外掛)
5:把專案拖進編輯器
6新建一個src資料夾 和webpack.config.js
7:webpack.config.js內容配置如下:
const path=require("path"); const WebpackHtmlPlugin = require('html-webpack-plugin'); const CleanwebpackPlugin=require('clean-webpack-plugin'); module.exports={ entry:{ index1:'./src/index1.js', index2:'./src/index2.js' }, output:{ path:path.resolve(__dirname,"dist"), filename:"[name].js" }, plugins:[ new WebpackHtmlPlugin({ minify:{ collapseWhitespace:true, //清除空格 removeAttributeQuotes:true, //清除多餘引號 removeComments:true //刪除註釋 }, title:"hello", template:"./src/index.html", chunks:['index'], filename:"index.html" }), new WebpackHtmlPlugin({ minify:{ collapseWhitespace:true, //清除空格 removeAttributeQuotes:true, //清除多餘引號 removeComments:true //刪除註釋 }, title:"hello2", template:"./src/index2.html", chunks:['index2'], filename:"index2.html" }), new CleanwebpackPlugin() ], devServer:{ //服務配置模組 contentBase:path.resolve(__dirname,"dist"), host:"localhost", port:8090, open:true } }
8:package.json scripts配置如下:
"scripts": {
"build": "webpack --mode production",
"dev":"webpack-dev-server --mode production"
},
9:要打包的html title處需配置
<title><%=htmlWebpackPlugin.options.title%></title>
10:執行命令進行打包 npm run build
11:開啟本地服務npm run dev