简介

Webpack是目前最流行的前端模块打包工具，依赖于 Node 几乎成为所有脚手架工程化开发的核心。在学习 Node 之后自然对 Webpack 的实现有所好奇，然而就目前水平来看源码有点吃力。不过核心原理为

  • 收集依赖，基于模块打包
    • 使用 babylon 生成 语法抽象树（AST树）
    • 使用 babel-traverse 找到所有依赖
    • 通过构建 CommonJs 代码获取 exports 导出内容
    • 使用 babel-core 将代码转化为 ES5

这篇文章主要介绍Webpack的常用配置

入口（empty）

打包文件依赖的入口配置

  1. entry: './src/pageOne/index.js', // 单入口打包
  2. entry: {
  3.   pageOne: './src/pageOne/index.js', // 多入口打包，多页应用
  4.   vanders: './src/vendors.js', // 常用三方库
  5.   pageThree: './src/pageThree/index.js'
  6. }

输出（output）

打包出来的文件配置

  • filename 输出文件的名字
  • path 输出文件的路径
    1. // 正常打包
    2. output: {
    3. filename: 'bundle.js',
    4. path: '/home/proj/public/assets' 
    5. }
    6. // 哈希打包
    7. output: {
    8. path: "/home/proj/cdn/assets/[hash]",
    9. publicPath: "http://cdn.example.com/assets/[hash]/"
    10. }

loader

用于对模块的源代码进行转换，Webpack仅仅只识别 JavaScript 代码，如果需要解析 CSS、HTML、JSX、VUE等文件需要配置专用的 loader。

  • rules 规则（多条）
    • 规则的文件格式
    • 规则的 loader（多个）
      1. module: {
      2. rules: [
      3.  {
      4.    test: /\.css$/, // 配置文件格式
      5.    use: [
      6.      { loader: 'style-loader' }, // 配置多个 loader
      7.      {
      8.        loader: 'css-loader',
      9.        options: {
      10.          modules: true
      11.        }
      12.      }
      13.    ]
      14.  }
      15. ]
      16. }

插件（plugins）

解决 loader 无法解决的事情

  1. const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
  2. const webpack = require('webpack'); //访问内置的插件
  4. // 向 plugins 传入 new 实例
  5. plugins: [
  6.   new webpack.optimize.UglifyJsPlugin(), // 压缩 js 插件
  7.   new HtmlWebpackPlugin({template: './src/index.html'}) // 压缩 html 插件
  8. ]

优化小技巧

  • 减少打包的范围，加快打包速度
  • HappyPack，同步打包转并行打包
  • DllPlugin，单独打包第三方库 ``` const HappyPack = require(‘happypack’)

module.exports = { module: { rules: [ { test: /.js$/, // js 的 loader loader: ‘happypack/loader?id=happybabel’, // 并行缓存打包内容 include: [resolve(‘src’)], // 只在 src 文件夹下查找 exclude: /node_modules/, // 不会去查找的路径 } ] }, plugins: [ new HappyPack({ id: ‘happybabel’, loaders: [‘babel-loader?cacheDirectory’], threads: 4, // 开启 4 个线程 }) ] } ```

资源

如果想自己实现一个小打包工具，可以参考以下资源，后期我再详细出个文章实现