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"
}
}
~~~
