webpack.config.js
~~~
//webpack 是node寫出來的 node的寫法
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
console.log(path.resolve('dist')); ///Users/chengcheng/Documents/code/webpack/dist
module.exports = {
devServer: { //開發服務器的配置
port:3000,
progress:true,
contentBase:'./build',
open:true,
compress:true
},
mode:'development', //production development
entry:"./src/index.js", //入口，從哪個地方開始打包
output: {
filename: "bundle.[hash:8].js", //打包后的文件名，8位hash值
// path: path.resolve('dist'), // 路徑必須是一個絕對路徑
path: path.resolve(__dirname,'build'), // 路徑必須是一個絕對路徑
},
plugins: [ //數組，放著所有的webpack插件
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
minify:{
removeAttributeQuotes:true, //刪除雙引號
collapseWhitespace:true,
},
hash:true //打包后的文件有hash值
})
]
};
~~~
package.json
~~~
{
"name": "webpack",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server"
},
"devDependencies": {
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
}
}
~~~
