初始化
npm init -y
npm install webpack webpack-cli -D
配置入口和出口
npm install webpack-dev-server -D
自动载入js文件
npm install html-webpack-plugin -D
使用hash解决缓存问题
清除dist目录
npm install clean-webpack-plugin -D
css读取loader
npm install style-loader css-loader less less-loader -D
加载图片loader 解析图片打包成文件或者base64插入代码中
npm install file-loader url-loader -D
通过option进行配置处理
处理高版本js
@babel/core babel的核心模块
babel-loader 解析js代码的加载器,webpack和babel的桥梁
@babel/preset-env es6转化成es5插件的集合
npm install @babel/plugin-transform-runtime @babel/runtime -D
@babel/plugin-transform-runtime依赖于@babel/runtime,运行时自动寻找到runtime
关于跨域问题
当协议域名端口号不相同时会产生跨域
造数据方法:before
暴露全局变量
- 直接使用cdn的方式 https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
- providePlugin
- 暴露在全局下 expose-loader
import $ from 'jquery’这样引入的时候是从node_modules中去找
webpack.ProvidePlugin =>webpack自带的插件
sourceMap(代码排查),用于调试错误
devtool
生产环境:cheap-module-source-map
开发环境:cheap-module-eval-source-map
Tree-shaking&scopeHosting
适用于生产环境
tree-shaking – 唯一一个在package.json中进行配置的项目 “sideEffects”:false,
这种方式可能会让引入没有使用的都被去除
排除掉需要的引入 “sideEffects”:["**/*.css"]
热更新
减少请求,提高加载速度,进行数据更新
new webpack.HotModuleReplacementPlugin() webpack自带的热更新
懒加载(动态加载模块)
在vue中所有的路由都进行了预引入
打包文件分析工具(生产环境下使用)
- webpack-bundle-analyzer
splitChunks
分离第三方模块和库
resolve解析
- extensions 添加扩展名进行匹配 引入时可以不用写.js也能正常导入 默认寻找js和json文件
- alias 设置别名
happyPack 多线程打包
- 多线程打包,把不同的逻辑交给不同的线程处理