Calerme/webpack_notes

学习 webpack 的笔记。

webpack-cli

webpack 命令行工具。

# 查看帮助
webpack --help

# 常用的两个参数
webpack <entry> [<entry>] -o <output>
webpack --config webpack.config.js

配置 babel-loader

babel

配置 TypeScript

typescript

提取公用代码 CommonsChunkPlugin

• 减少代码冗余
• 提高加载速度

webpack.optimize.CommonsChunkPlugin

代码分割与懒加载

通过两种方法实现：

• webpack methods（逐渐淘汰）
• ES 2015 Loader spec 推荐

代码分割与懒加载

代码分割

• 分享业务代码和第三方依赖
• 分享业务代码和业务公共代码和第三方依赖
• 分离首次加载和访问后加载的代码

处理 CSS

css

• css-loader 将 CSS 转换为 JS 代码
• style-loader 将转换为 JS 的 CSS 代码作为一个 style 标签插入 HTML
  • style-loader/url
  • style-loader/useable

less & sass

提取 CSS 文件

• extract-loader
• ExtractTextWebpackPlugin（主流）

ExtracTextWebpackPlugin

PostCSS

PostCSS

常用插件：

• autoprefixer
• cssnano
• css-next
• postcss-import
• postcss-url
• postcs-assets

browserslist

由于很多插件依赖 browserslist，所以可以将 browserslist 的配置提取出来，可以写在 package.json 里，也可以写在项目根目录的 .browserslistrc 文件。

package.json：

{
    ...,
    "browserslist": [
        ">= 1%",
        "last 2 versions"
    ],
    ...,
}

.browserslistrc

> 1%
Last 2 versions
IE 10

Tree Shaking

• JS Tree Shaking
• CSS Tree Shaking

应用场景：

• 常规优化
• 打包第三方库

webpack 会将冗余代码标识出来，再通过插件进行删除。（webpack.optimize.uglifyJS）

文件处理

• 图片文件

• 字体文件

• 第三方 JS 库

• file-loader

• url-loader

• img-loader

• postcss-sprites

自动生成 HTML

• HtmlWebpackPlugin
• options
  • template
  • filename
  • minify
  • chunks
  • inject

clean-webpack-plugin

每次打包时先清除指定目录。

plugins: [
    new CleanWebpackPlugin(['dist'])
]

webpack-dev-server

webpack-dev-server

SourceMap

SourceMap

eslint

• eslint
• eslint-loader
• eslint-plugin-html
• eslint-friendly-formatter

区分开发环境和生产环境

• webpack-merge