13
webpack应用程序静态模块打包器 https://www.webpackjs.com/
入口 entry
输出 output
loader
插件 plugins
webpack全局 项目内安装
全局安装
npm i webpack -g
npm i webpack-cli -g
检测全局版本 webpack --version
项目内安装
npm init -y
npm i webpack -D
npm i webpack-cli -D
检测项目内版本
packjson.js文件
scripts：{“test”：“webpack --version”}
npm run test
1 操作
默认的入口文件 src/index.js
默认的出口文件 dist/main,js
2 development开发
production代码压缩了
webpack --mode development 就可以把index.js文件打包到dist文件下 。
重复输入这个命令。就会再次更新成一个新的打包
全局的实时监控webpack --mode development -w
局部的实时监控，项目里的，package.json文件
“scripts":{“build”:“webpack --mode development -w”}
npm run build 默认的配置文件是webpack.config.js
3 解决缓存问题（bundle[hash:8].js）
让html 文件自动引入打包后的js文件
yarn add html-webpack-plugin 每次打包生成一个js文件
（注意是在webpack.config.js文件夹下引入和配置文件plugins:[new HtmlWebpackPlugin({tempiate:"./index.html"})]）
yarn add clean-webpack-plugin，目的是只保留最新的打包文件，旧的都删除
4 打包css文件
npm i style-loader css-loader/yarn add style-loader css-loader
5 打包图片
yarn add url-loader file-loader
6 开发阶段的服务器webpack-dev-server
项目中安装 yarn add webpack-dev-server
自动有热更新功能