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文件

优化打包速度

多页面配置

你可能感兴趣的:(webpack笔记)