webpack_day01
环境搭建
npm i webpack webpack-cli -D
在webpack.config.js设置入口和出口
const path = require('path');
module.exports = {
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
}
}
设置index.html 安装html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
plugins:[
new HtmlWebpackPlugin({
template:"./public/index.html",
filename:"app.html",
title:"webpack day01"
})
]
}
设置清除dist文件
module.exports={
output:{
clean:true
}
}
设置开发环境代码报错查看 devtool
module.exports={
devtool:"inline-source-map"
}
设置开发环境 热更新 使用 webpack --watch 或者 安装 webpack-dev-server
module.exports={
devServer:{
static:"./dist",
open:true,
host:"localhost",
hot:true
}
}
pageage.json配置dev 和 build
"build": "webpack",
"dev": "webpack-dev-server"
wepack中的资源类型 asset/resource asset/source asset/inline asset
module:{
rules:[
{
test:/.png$/,
type:'asset/resource'
},
{
test:/.jpg$/,
type:'asset/inline'
},
{
test:/.txt$/,
type:'asset/source'
},
{
test:/.png$/,
type:'asset'
}
]
}