#### 快速構建package.json文件
`npm init -y`
#### 安裝webpack4及其命令行接口
`npm i webpack webpack-cli --save-dev`
```
//package.json文件增加build參數
"scripts": {
"build": "webpack"
}
//webpack.config.js 增加內容
//基于commonjs規范
let path = require('path');
module.exports = {
entry:'./src/index.js',
output:{
filename:'index.html',
path:path.resolve('./dist'),
},
module:{},
plugins:[],
mode:'development',
resolve:{},
}
```
#### webpack 服務器 webpack-dev-server
```
//webpack.config.js 添加內容
devServer:{
contentBase:'./dist',
},
```
#### html-webpack-plugin html打包工具
```
//https://segmentfault.com/a/1190000013883242
var htmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
entry: './src/script/main.js',
output: {
filename: 'js/bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'head'
})
]
}
```
