webpack笔记

publicPath: 所有资源从这个路径开始查找
resolve： 指定查找的路径
path: webpack内置处理路径的
clean-webpack-plugins:清除某个目录

安装和使用

处理js：

• babel-preset-2015: 转成es5代码
• babel-polyfill: 将es6的方法转es5

代码分割和懒加载

• 代码分割：将同时使用的文件抽取出来，当公共模块引用
• 懒加载： 在某个时机动态加载js文件

处理css:

• style-loader: 处理style或link标签,有options配置
• css-loader: 处理css样式，直接将css插入style标签中
• file-loader: 处理文件，将css用link的方式引入
• MiniCssExtractPlugin: 打包import 进来的css为一个文件，可以指定路径
• postcss-loader: css 构建工具,自动加前缀，压缩，使用未来css语法

tree-shaking

将未被用到的代码删除

• js: 生成环境mode: 'production'默认去掉无用代码，且压缩代码
• css:
  • 使用purify-css处理
  • glob-all处理多文件

处理资源

• css 中处理图片
  • file-loader： 处理图片
  • url-loader: 小于某个值转base64编码
• 压缩图片: img-loader
• 处理字体: file-loader
• 处理第三方库：
  • 在一个js文件里引用jquery,但不想script或import；可以使用ProvidePlugin，将jquery注入到文件里
  • imports-loader
• html中处理图片: html-loader

处理html

• html-webpack-plugin

环境搭建

• webpack-dev-server: 本地服务器
• 模块热更新HMR: 不刷新即可更新
• sourceMap: 可以看到未被打包的源文件，方便定位bug
• 区分开发环境和线上环境： 开发环境不需要压缩代码，生成环境需要，所以有必要分开几个config文件

优化打包速度

多页面配置