2022-03-29

局部安装webpack，使用 npx webpack进行打包
使用 npx webpack --watch进行监听打包

使用webpack.config.js,来指定相关配置： entry, output, mode,
output:通过filname,来指定打包文件名称，path指定输出地址
path：通过 const path = require('path'),来取得绝对路径， 通过path.resolve(__dirname, './dist'),来指定输出目录
claen:true 来清除上次生成的文件

mode: 'development', 区分生成，开发， none
devtool: 'inline-source-map' 打开sourcemap，便于追踪代码

devServer:进行webpack的热更新
static:'./dist' devServer 指向的物理路径

webpack-dev-server : 进行webpack的热更新（本身没有输出任何物理文件，把打包好的文件放在内存了，）

webpack生产流程：

image.png

插件：plugins

html-webpack-plugin: {
  template:'./index.html',  依赖模板
  filename:'fff.html',  输出文件
  inject:'body' 放置位置
}