开篇

很多人都或多或少使用过 webpack，但是很少有人能够系统的学习 webpack 配置，遇到错误的时候就会一脸懵，不知道从哪查起？性能优化时也不知道能做什么，网上的优化教程是不是符合自己的项目？等一系列问题！本文从最基础配置一步步到一个完善的大型项目的过程。让你对 webpack 再也不会畏惧，让它真正成为你的得力助手！

本文从下面几个课题来实现

项目地址

github.com/luoxue-vict…

我把每一课都切成了不同的分支，大家可以根据课时一步步学习

脚手架

  1. npm i -g webpack-box
  1.  

使用

  1. webpack-box dev   # 开发环境
  2. webpack-box build # 生产环境
  3. webpack-box dll   # 编译差分包
  4. webpack-box dev index   # 指定页面编译（多页面）
  5. webpack-box build index # 指定页面编译（多页面）
  6. webpack-box build index --report # 开启打包分析
  7. webpack-box build:ssr  # 编译ssr
  8. webpack-box ssr:server # 在 server 端运行
  1.  

在 package.json 中使用

  1. {
  2.   "scripts": {
  3.     "dev": "webpack-box dev",
  4.     "build": "webpack-box build",
  5.     "dll": "webpack-box dll",
  6.     "build:ssr": "webpack-box build:ssr",
  7.     "ssr:server": "webpack-box ssr:server"
  8.   }
  9. }
  1.  

使用

  1. npm run build --report # 开启打包分析
  1.  

扩展配置

box.config.js

  1. module.exports = function (config) {
  2.   /**
  3.    * @param {object} dll 开启差分包
  4.    * @param {object} pages 多页面配置 通过 box run/build index 来使用
  5.    * @param {function} chainWebpack
  6.    * @param {string} entry 入口
  7.    * @param {string} output 出口
  8.    * @param {string} publicPath
  9.    * @param {string} port
  10.    */
  11.   return {
  12.     entry: 'src/main.js',
  13.     output: 'dist',
  14.     publicPath: '/common/',
  15.     port: 8888,
  16.     dll: {
  17.       venders: ['vue', 'react']
  18.     },
  19.     pages: {
  20.       index: {
  21.         entry: 'src/main.js',
  22.         template: 'public/index.html',
  23.         filename: 'index.html',
  24.       },
  25.       index2: {
  26.         entry: 'src/main.js',
  27.         template: 'public/index2.html',
  28.         filename: 'index2.html',
  29.       }
  30.     },
  31.     chainWebpack(config) {
  32.     }
  33.   }
  34. }

课题 1:初探 webpack？探究 webpack 打包原理

想要学好 webpack，我们首先要了解 webpack 的机制，我们先从js加载css开始学习。

我们从下面这个小练习开始走进 webpack 吧

在 index.js 中引入 index.css

  1. const css = require('./index.css')
  2. console.log(css)
  1.  

css 文件并不能被 js 识别，webpack 也不例外，上述的写法不出意外会报错

我们如何让 webpack 识别 css 呢，答案就在 webpack 给我们提供了 loader 机制，可以让我们通过loader 将任意的文件转成 webpack 可以识别的文件

本章主要讲解

  1. webpack 基础配置
  2. 解析 bundle 如何加载模块
  3. 动态 import 加载原理
  4. 使用 webpack-chain 重写配置
  5. 课时 1 小结

webpack 基础配置

需要的依赖包

package.json

  1. {
  2.   "scripts": {
  3.     "dev": "cross-env NODE_ENV=development webpack", // 开发环境
  4.     "build": "cross-env NODE_ENV=production webpack" // 生产环境
  5.   },
  6.   "dependencies": {
  7.     "cross-env": "^6.0.3", // 兼容各种环境
  8.     "css-loader": "^3.2.0",
  9.     "rimraf": "^3.0.0", // 删除文件
  10.     "webpack": "^4.41.2"
  11.   },
  12.   "devDependencies": {
  13.     "webpack-cli": "^3.3.10"
  14.   }
  15. }
  1.  

webpack 基础配置

webpack.config.js

  1. const path = require('path');
  2. const rimraf = require('rimraf');
  3.  
  4. // 删除 dist 目录
  5. rimraf.sync('dist');
  6.  
  7. // webpack 配置
  8. module.exports = {
  9.   entry: './src/index',
  10.   mode: process.env.NODE_ENV,
  11.   output: {
  12.     filename: 'bundle.js',
  13.     path: path.resolve(__dirname, 'dist')
  14.   }
  15. };
  1.  

css 引入到 js

src/index.js

  1. const css = require('css-loader!./index.css');
  2. const a = 100;
  3. console.log(a, css);
  1.  

测试 css

src/index.css

  1. body {
  2.   width: 100%;
  3.   height: 100vh;
  4.   background-color: orange;
  5. }
  1.  

解析 bundle 如何加载模块

我删掉了一些注释跟一些干扰内容，这样看起来会更清晰一点

  • bundle 是一个立即执行函数，可以认为它是把所有模块捆绑在一起的一个巨型模块。
  • webpack 将所有模块打包成了 bundle 的依赖，通过一个对象注入
  • 0 模块 就是入口
  • webpack 通过 __webpack_require__ 引入模块
  • __webpack_require__ 就是我们使用的 require，被 webpack 封装了一层

dist/bundle.js

  1. (function(modules) {
  2.   function __webpack_require__(moduleId) {
  3.     if (installedModules[moduleId]) {
  4.       return installedModules[moduleId].exports;
  5.     }
  6.     var module = (installedModules[moduleId] = {
  7.       i: moduleId,
  8.       l: false,
  9.       exports: {}
  10.     });
  11.  
  12.     modules[moduleId].call(
  13.       module.exports,
  14.       module,
  15.       module.exports,
  16.       __webpack_require__
  17.     );
  18.  
  19.     module.l = true;
  20.  
  21.     return module.exports;
  22.   }
  23.   return __webpack_require__((__webpack_require__.s = 0));
  24. })({
  25.   './src/index.js': function(module, exports, __webpack_require__) {
  26.     eval(`
  27.       const css = __webpack_require__("./src/style/index.css")
  28.       const a = 100;
  29.       console.log(a, css)
  30.     `);
  31.   },
  32.  
  33.   './src/style/index.css': function(module, exports, __webpack_require__) {
  34.     eval(`
  35.       exports = module.exports = __webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(false);
  36.       exports.push([module.i, "body {
  37.         width: 100%;
  38.         height: 100vh;
  39.         background-color: orange;
  40.       }", ""]);
  41.     `);
  42.   },
  43.  
  44.   0: function(module, exports, __webpack_require__) {
  45.     module.exports = __webpack_require__('./src/index.js');
  46.   }
  47. });
  1.  

动态 import 加载原理

如果我们把 index.js 的 require 改成 import 会发生什么？

我们知道 import 跟 require 的区别是，import 是动态加载只有在用到的时候才会去加载，而 require 只要声明了就会加载，webpack 遇到了 require 就会把它当成一个模块加载到 bundle 的依赖里

那么问题来了，如果我们使用了 import 去引用一个模块，它是如何加载的呢？

require 改成 import()

src/index.js

  1. // const css = require('css-loader!./index.css');
  2. const css = import('css-loader!./index.css');
  3. const a = 100;
  4. console.log(a, css);
  1.  

动态加载打包结果

除了正常的 bundle 之外，我们还可以看见一个 0.boundle.js

0.boundle.js 就是我们的动态加载的 index.css 模块

  1. |-- bundle.js
  2. |-- 0.boundle.js
  1.  

动态模块

0.boundle.js

这个文件就是把我们 import 的模块放进了一个单独的 js 文件中

  1. (window['webpackJsonp'] = window['webpackJsonp'] || []).push([
  2.   [0],
  3.   {
  4.     './node_modules/css-loader/dist/runtime/api.js': function(
  5.       module,
  6.       exports,
  7.       __webpack_require__
  8.     ) {
  9.       'use strict';
  10.       eval(`
  11.         ...
  12.       `);
  13.     },
  14.  
  15.     './src/style/index.css': function(module, exports, __webpack_require__) {
  16.       eval(`
  17.         exports = module.exports = __webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(false));
  18.         exports.push([module.i, \`body {
  19.           width: 100%;
  20.           height: 100vh;
  21.           background-color: orange;
  22.         },"\`]
  23.       `);
  24.     }
  25.   }
  26. ]);
  1.  

动态模块加载逻辑

我们再看下 dist/bundle.js

方便理解，我把大部分代码和注释都删掉了

原理很简单，就是利用的 jsonp 的实现原理加载模块，只是在这里并不是从 server 拿数据而是从其他模块中

  1. 调用模块时会在 window 上注册一个 webpackJsonp 数组，window['webpackJsonp'] = window['webpackJsonp'] || []
  2. 当我们 import时，webpack 会调用 __webpack_require__.e(0) 方法，也就是 requireEnsure
  3. webpack 会动态创建一个 script 标签去加载这个模块，加载成功后会将该模块注入到 webpackJsonp 中
  4. webpackJsonp.push 会调用 webpackJsonpCallback 拿到模块
  5. 模块加载完（then）再使用 __webpack_require__ 获取模块
  1. (function(modules) {
  2.   function webpackJsonpCallback(data) {
  3.     var chunkIds = data[0];
  4.     var moreModules = data[1];
  5.     var moduleId,
  6.       chunkId,
  7.       i = 0,
  8.       resolves = [];
  9.     for (; i < chunkIds.length; i++) {
  10.       chunkId = chunkIds[i];
  11.       if (
  12.         Object.prototype.hasOwnProperty.call(installedChunks, chunkId) &&
  13.         installedChunks[chunkId]
  14.       ) {
  15.         resolves.push(installedChunks[chunkId][0]);
  16.       }
  17.       // 模块安装完
  18.       installedChunks[chunkId] = 0;
  19.     }
  20.     for (moduleId in moreModules) {
  21.       if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
  22.         modules[moduleId] = moreModules[moduleId];
  23.       }
  24.     }
  25.     if (parentJsonpFunction) parentJsonpFunction(data);
  26.     while (resolves.length) {
  27.       // 执行所有 promise 的 resolve 函数
  28.       resolves.shift()();
  29.     }
  30.   }
  31.  
  32.   function jsonpScriptSrc(chunkId) {
  33.     return __webpack_require__.p + '' + ({}[chunkId] || chunkId) + '.bundle.js';
  34.   }
  35.  
  36.   function __webpack_require__(moduleId) {
  37.     // ...
  38.   }
  39.  
  40.   __webpack_require__.e = function requireEnsure(chunkId) {
  41.     var promises = [];
  42.     // ...
  43.     var script = document.createElement('script');
  44.     var onScriptComplete;
  45.     script.charset = 'utf-8';
  46.     script.timeout = 120;
  47.     script.src = jsonpScriptSrc(chunkId);
  48.  
  49.     onScriptComplete = function(event) {
  50.       // 处理异常，消除副作用
  51.       // ...
  52.     };
  53.     var timeout = setTimeout(function() {
  54.       onScriptComplete({ type: 'timeout', target: script });
  55.     }, 120000);
  56.     script.onerror = script.onload = onScriptComplete;
  57.     document.head.appendChild(script);
  58.     // ...
  59.     // 动态加载模块
  60.     return Promise.all(promises);
  61.   };
  62.  
  63.   var jsonpArray = (window['webpackJsonp'] = window['webpackJsonp'] || []);
  64.   // 重写数组 push 方法
  65.   jsonpArray.push = webpackJsonpCallback;
  66.   jsonpArray = jsonpArray.slice();
  67.   for (var i = 0; i < jsonpArray.length; i++)
  68.     webpackJsonpCallback(jsonpArray[i]);
  69.  
  70.   return __webpack_require__((__webpack_require__.s = 0));
  71. })({
  72.   './src/index.js': function(module, exports, __webpack_require__) {
  73.     eval(`
  74.         const css = __webpack_require__.e(0).then(__webpack_require__.t.bind(null, "./src/style/index.css", 7))
  75.         const a = 100;
  76.         console.log(a, css)
  77.       `);
  78.   },
  79.   0: function(module, exports, __webpack_require__) {
  80.     eval(`module.exports = __webpack_require__("./src/index.js");`);
  81.   }
  82. });
  1.  

使用 webpack-chain 重写配置

我们用 webpack-chain 来写 webpack 的配置，原因是 webpack-chain 的方式更加灵活

官方解释

webpack-chain 尝试通过提供可链式或顺流式的 API 创建和修改 webpack 配置。API 的 Key 部分可以由用户指定的名称引用，这有助于跨项目修改配置方式的标准化。

  1. const path = require('path');
  2. const rimraf = require('rimraf');
  3. const Config = require('webpack-chain');
  4. const config = new Config();
  5. const resolve = src => {
  6.   return path.join(process.cwd(), src);
  7. };
  8.  
  9. // 删除 dist 目录
  10. rimraf.sync('dist');
  11.  
  12. config
  13.   // 入口
  14.   .entry('src/index')
  15.   .add(resolve('src/index.js'))
  16.   .end()
  17.   // 模式
  18.   // .mode(process.env.NODE_ENV) 等价下面
  19.   .set('mode', process.env.NODE_ENV)
  20.   // 出口
  21.   .output.path(resolve('dist'))
  22.   .filename('[name].bundle.js');
  23.  
  24. config.module
  25.   .rule('css')
  26.   .test(/\.css$/)
  27.   .use('css')
  28.   .loader('css-loader');
  29.  
  30. module.exports = config.toConfig();
  1.  

课时 1 小结

至此课时 1 已经结束了，我们主要做了以下事情

  1. webpack 基础配置
  2. 将 css 通过 css-loader 打包进 js 中
  3. 解析 bundle 如何加载模块的
  4. webpack 如何实现的动态加载模块

学习一个工具我们不仅要看懂它的配置，还要对它的原理一起了解，只有学到框架的精髓，我们才能应对如今大前端如此迅猛的发展。

课题 2：搭建开发环境跟生产环境

本章提要：

目录

  1. │── build
  2. │   │── base.js                 // 公共部分
  3. │   │── build.js
  4. │   └── dev.js
  5. │── config
  6. │   │── base.js                 // 基础配置
  7. │   │── css.js                  // css 配置
  8. │   │── HtmlWebpackPlugin.js    // html 配置
  9. │   └── MiniCssExtractPlugin.js // 提取css
  10. │── public                      // 公共资源
  11. │   └── index.html              // html 模版
  12. └── src                         // 开发目录
  13.     │── style
  14.     │ └── index.css
  15.     └── main.js                // 主入口

实现可插拔配置

package.json

  1. {
  2.   "scripts": {
  3.     "dev": "cross-env NODE_ENV=development node build/dev.js",
  4.     "build": "cross-env NODE_ENV=production node build/build.js"
  5.   },
  6.   "dependencies": {
  7.     "cross-env": "^6.0.3",
  8.     "css-loader": "^3.2.0",
  9.     "cssnano": "^4.1.10",
  10.     "ora": "^4.0.3",
  11.     "rimraf": "^3.0.0",
  12.     "webpack": "^4.41.2"
  13.   },
  14.   "devDependencies": {
  15.     "extract-text-webpack-plugin": "^3.0.2",
  16.     "html-webpack-plugin": "^3.2.0",
  17.     "mini-css-extract-plugin": "^0.8.0",
  18.     "vue-cli-plugin-commitlint": "^1.0.4",
  19.     "webpack-chain": "^6.0.0",
  20.     "webpack-cli": "^3.3.10",
  21.     "webpack-dev-server": "^3.9.0"
  22.   }
  23. }
  1.  

build/base.js

  1. const { findSync } = require('../lib');
  2. const Config = require('webpack-chain');
  3. const config = new Config();
  4. const files = findSync('config');
  5. const path = require('path');
  6. const resolve = p => {
  7.   return path.join(process.cwd(), p);
  8. };
  9.  
  10. module.exports = () => {
  11.   const map = new Map();
  12.  
  13.   files.map(_ => {
  14.     const name = _.split('/')
  15.       .pop()
  16.       .replace('.js', '');
  17.     return map.set(name, require(_)(config, resolve));
  18.   });
  19.  
  20.   map.forEach(v => v());
  21.  
  22.   return config;
  23. };
  1.  

构建生产环境

build/build.js

  1. const rimraf = require('rimraf');
  2. const ora = require('ora');
  3. const chalk = require('chalk');
  4. const path = require('path');
  5. // 删除 dist 目录
  6. rimraf.sync(path.join(process.cwd(), 'dist'));
  7.  
  8. const config = require('./base')();
  9. const webpack = require('webpack');
  10. const spinner = ora('开始构建项目...');
  11. spinner.start();
  12.  
  13. webpack(config.toConfig(), function(err, stats) {
  14.   spinner.stop();
  15.   if (err) throw err;
  16.   process.stdout.write(
  17.     stats.toString({
  18.       colors: true,
  19.       modules: false,
  20.       children: false,
  21.       chunks: false,
  22.       chunkModules: false
  23.     }) + '\n\n'
  24.   );
  25.  
  26.   if (stats.hasErrors()) {
  27.     console.log(chalk.red('构建失败\n'));
  28.     process.exit(1);
  29.   }
  30.  
  31.   console.log(chalk.cyan('build完成\n'));
  32. });
  1.  

构建开发环境（devServer）

build/dev.js

  1. const config = require('./base')();
  2. const webpack = require('webpack');
  3. const chalk = require('chalk');
  4. const WebpackDevServer = require('webpack-dev-server');
  5. const port = 8080;
  6. const publicPath = '/common/';
  7.  
  8. config.devServer
  9.   .quiet(true)
  10.   .hot(true)
  11.   .https(false)
  12.   .disableHostCheck(true)
  13.   .publicPath(publicPath)
  14.   .clientLogLevel('none');
  15.  
  16. const compiler = webpack(config.toConfig());
  17. // 拿到 devServer 参数
  18. const chainDevServer = compiler.options.devServer;
  19. const server = new WebpackDevServer(
  20.   compiler,
  21.   Object.assign(chainDevServer, {})
  22. );
  23.  
  24. ['SIGINT', 'SIGTERM'].forEach(signal => {
  25.   process.on(signal, () => {
  26.     server.close(() => {
  27.       process.exit(0);
  28.     });
  29.   });
  30. });
  31. // 监听端口
  32. server.listen(port);
  33.  
  34. new Promise(() => {
  35.   compiler.hooks.done.tap('dev', stats => {
  36.     const empty = '    ';
  37.     const common = `App running at:
  38.     - Local: http://127.0.0.1:${port}${publicPath}\n`;
  39.     console.log(chalk.cyan('\n' + empty + common));
  40.   });
  41. });
  1.  

提取 css

config/css.js

css 提取 loader 配置

  1. module.exports = (config, resolve) => {
  2.   return (lang, test) => {
  3.     const baseRule = config.module.rule(lang).test(test);
  4.     const normalRule = baseRule.oneOf('normal');
  5.     applyLoaders(normalRule);
  6.     function applyLoaders(rule) {
  7.       rule
  8.         .use('extract-css-loader')
  9.         .loader(require('mini-css-extract-plugin').loader)
  10.         .options({
  11.           publicPath: './'
  12.         });
  13.       rule
  14.         .use('css-loader')
  15.         .loader('css-loader')
  16.         .options({});
  17.     }
  18.   };
  19. };
  1.  

css 提取插件 MiniCssExtractPlugin

config/MiniCssExtractPlugin.js

  1. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  2.  
  3. module.exports = (config, resolve) => {
  4.   return () => {
  5.     config
  6.       .oneOf('normal')
  7.       .plugin('mini-css-extract')
  8.       .use(MiniCssExtractPlugin);
  9.   };
  10. };
  1.  

自动生成 html

config/HtmlWebpackPlugin.js

  1. const HtmlWebpackPlugin = require('html-webpack-plugin');
  2.  
  3. module.exports = (config, resolve) => {
  4.   return () => {
  5.     config.plugin('html').use(HtmlWebpackPlugin, [
  6.       {
  7.         template: 'public/index.html'
  8.       }
  9.     ]);
  10.   };
  11. };
  1.  

项目测试

测试 html 模板

public/index.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>learn_webpack</title>
  6.   <body></body>
  7. </html>
  1.  

测试 css 模板

src/style/index.css

  1. .test {
  2.   width: 200px;
  3.   height: 200px;
  4.   color: red;
  5.   background-color: orange;
  6. }
  1.  

程序入口

src/main.js

  1. require('./style/index.css');
  2.  
  3. const h2 = document.createElement('h2');
  4. h2.className = 'test';
  5. h2.innerText = 'test';
  6. document.body.append(h2);
  1.  

课题 3：基础配置之loader

本章提要：

目录

增加以下文件

  1. │──── config                // 配置目录
  2. │   │── babelLoader.js      // babel-loader 配置
  3. │   │── ForkTsChecker.js    // ts 静态检查
  4. │   │── FriendlyErrorsWebpackPlugin.js // 友好错误提示
  5. │   └── style
  6. │──── src                   // 开发目录
  7. │   │── style
  8. │   │  │── app.css
  9. │   │  │── index.less       // 测试 less
  10. │   │  │── index.scss       // 测试 sass
  11. │   │  └── index.postcss    // 测试 postcss
  12. │   └── ts
  13. │     └── index.ts          // 测试 ts
  14. │── babel.js
  15. │── postcss.config.js       // postcss 配置
  16. │── tsconfig.json           // ts 配置
  17. └──── dist                  // 打包后的目录
  18.    │── app.bundle.js
  19.    │── app.css
  20.    └── index.html
  1.  

配置 babel

config/babelLoader.js

  1. module.exports = (config, resolve) => {
  2.   const baseRule = config.module.rule('js').test(/.js│.tsx?$/);
  3.   const babelPath = resolve('babel.js');
  4.   const babelConf = require(babelPath);
  5.   const version = require(resolve('node_modules/@babel/core/package.json'))
  6.     .version;
  7.   return () => {
  8.     baseRule
  9.       .use('babel')
  10.       .loader(require.resolve('babel-loader'))
  11.       .options(babelConf({ version }));
  12.   };
  13. };
  1.  

使用 babel 配置 ts

这里我们使用 babel 插件 @babel/preset-typescript 将 ts 转成 js，并使用 ForkTsCheckerWebpackPlugin、ForkTsCheckerNotifierWebpackPlugin 插件进行错误提示。

babel.js

  1. module.exports = function(api) {
  2.   return {
  3.     presets: [
  4.       [
  5.         '@babel/preset-env',
  6.         {
  7.           targets: {
  8.             chrome: 59,
  9.             edge: 13,
  10.             firefox: 50,
  11.             safari: 8
  12.           }
  13.         }
  14.       ],
  15.       [
  16.         '@babel/preset-typescript',
  17.         {
  18.           allExtensions: true
  19.         }
  20.       ]
  21.     ],
  22.     plugins: [
  23.       '@babel/plugin-transform-typescript',
  24.       'transform-class-properties',
  25.       '@babel/proposal-object-rest-spread'
  26.     ]
  27.   };
  28. };
  1.  

ts 静态类型检查

  1. const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
  2. const ForkTsCheckerNotifierWebpackPlugin = require('fork-ts-checker-notifier-webpack-plugin');
  3.  
  4. module.exports = (config, resolve) => {
  5.   return () => {
  6.     config.plugin('ts-fork').use(ForkTsCheckerWebpackPlugin, [
  7.       {
  8.         // 将async设为false，可以阻止Webpack的emit以等待类型检查器/linter，并向Webpack的编译添加错误。
  9.         async: false
  10.       }
  11.     ]);
  12.     // 将TypeScript类型检查错误以弹框提示
  13.     // 如果fork-ts-checker-webpack-plugin的async为false时可以不用
  14.     // 否则建议使用，以方便发现错误
  15.     config.plugin('ts-notifier').use(ForkTsCheckerNotifierWebpackPlugin, [
  16.       {
  17.         title: 'TypeScript',
  18.         excludeWarnings: true,
  19.         skipSuccessful: true
  20.       }
  21.     ]);
  22.   };
  23. };
  1.  

友好错误提示插件

config/FriendlyErrorsWebpackPlugin.js

  1. const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
  2.  
  3. module.exports = (config, resolve) => {
  4.   return () => {
  5.     config.plugin('error').use(FriendlyErrorsWebpackPlugin);
  6.   };
  7. };
  1.  

配置样式，style，css、less、sass、postcss 等

  1. module.exports = (config, resolve) => {
  2.   const createCSSRule = (lang, test, loader, options = {}) => {
  3.     const baseRule = config.module.rule(lang).test(test);
  4.     const normalRule = baseRule.oneOf('normal');
  5.     normalRule
  6.       .use('extract-css-loader')
  7.       .loader(require('mini-css-extract-plugin').loader)
  8.       .options({
  9.         hmr: process.env.NODE_ENV === 'development',
  10.         publicPath: '/'
  11.       });
  12.     normalRule
  13.       .use('css-loader')
  14.       .loader(require.resolve('css-loader'))
  15.       .options({});
  16.     normalRule.use('postcss-loader').loader(require.resolve('postcss-loader'));
  17.     if (loader) {
  18.       const rs = require.resolve(loader);
  19.       normalRule
  20.         .use(loader)
  21.         .loader(rs)
  22.         .options(options);
  23.     }
  24.   };
  25.  
  26.   return () => {
  27.     createCSSRule('css', /\.css$/, 'css-loader', {});
  28.     createCSSRule('less', /\.less$/, 'less-loader', {});
  29.     createCSSRule('scss', /\.scss$/, 'sass-loader', {});
  30.     createCSSRule('postcss', /\.p(ost)?css$/);
  31.   };
  32. };
  1.  

postcss 配置

  1. module.exports = {
  2.   plugins: {
  3.     'postcss-px-to-viewport': {
  4.       unitToConvert: 'px',
  5.       viewportWidth: 750,
  6.       unitPrecision: 5,
  7.       propList: ['*'],
  8.       viewportUnit: 'vw',
  9.       fontViewportUnit: 'vw',
  10.       selectorBlackList: [],
  11.       minPixelValue: 1,
  12.       mediaQuery: false,
  13.       replace: true,
  14.       exclude: [],
  15.       landscape: false,
  16.       landscapeUnit: 'vw',
  17.       landscapeWidth: 568
  18.     }
  19.   }
  20. };
  1.  

编译前后 css 对比

src/style/index.less

  1. /* index.less */
  2. .test {
  3.   width: 300px;
  4. }
  1.  

dist/app.css

  1. /* index.css */
  2. .test {
  3.   width: 36.66667vw;
  4.   height: 26.66667vw;
  5.   color: red;
  6.   background-color: orange;
  7. }
  8. /* app.css */
  9. .test {
  10.   font-size: 8vw;
  11. }
  12. /* index.less */
  13. .test {
  14.   width: 40vw;
  15. }
  16.  
  17. /* index.scss */
  18. .test {
  19.   height: 40vw;
  20. }
  21. /* index.postcss */
  22. .test {
  23.   background: green;
  24.   height: 26.66667vw;
  25. }
  1.  

配置 autoprefixer

自动添加 css 前缀

postcss.config.js

  1. module.exports = {
  2.   plugins: {
  3.     autoprefixer: {
  4.       overrideBrowserslist: [
  5.         '> 1%',
  6.         'last 3 versions',
  7.         'iOS >= 8',
  8.         'Android >= 4',
  9.         'Chrome >= 40'
  10.       ]
  11.     }
  12.   }
  13. };
  1.  

转换前

  1. /* index.css */
  2. .test {
  3.   width: 200px;
  4.   height: 200px;
  5.   color: red;
  6.   display: flex;
  7.   background-color: orange;
  8. }

转换后

  1. /* index.css */
  2. .test {
  3.   width: 26.66667vw;
  4.   height: 26.66667vw;
  5.   color: red;
  6.   display: -webkit-box;
  7.   display: -webkit-flex;
  8.   display: -ms-flexbox;
  9.   display: flex;
  10.   background-color: orange;
  11. }
  1.  

开启 source map

  1. config.devtool('cheap-source-map');
  1. └── dist
  2.   │── app.bundle.js
  3.   │── app.bundle.js.map
  4.   │── app.css
  5.   │── app.css.map
  6.   └── index.html

在源文件下会有一行注释，证明开启了 sourcemap

  1. /*# sourceMappingURL=app.css.map*/
  1.  

课时 4：webpack性能优化

本章讲解

  1. 分离 Manifest
  2. Code Splitting（代码分割）
  3. Bundle Splitting（打包分割）
  4. Tree Shaking（删除死代码）
  5. 开启 gzip

分离 Manifest

  1. module.exports = (config, resolve) => {
  2.   return () => {
  3.     config
  4.       .optimization
  5.       .runtimeChunk({
  6.         name: "manifest"
  7.       })
  8.   }
  9. }
  1.  

Code Splitting

  1. 使用动态 import 或者 require.ensure 语法，在第一节已经讲解
  2. 使用 babel-plugin-import 插件按需引入一些组件库

Bundle Splitting

将公共的包提取到 chunk-vendors 里面，比如你require('vue')，webpack 会将 vue 打包进 chunk-vendors.bundle.js

  1. module.exports = (config, resolve) => {
  2.   return () => {
  3.     config
  4.       .optimization.splitChunks({
  5.         chunks: 'async',
  6.         minSize: 30000,
  7.         minChunks: 1,
  8.         maxAsyncRequests: 3,
  9.         maxInitialRequests: 3,
  10.         cacheGroups: {
  11.           vendors: {
  12.             name: `chunk-vendors`,
  13.             test: /[\\/]node_modules[\\/]/,
  14.             priority: -10,
  15.             chunks: 'initial'
  16.           },
  17.           common: {
  18.             name: `chunk-common`,
  19.             minChunks: 2,
  20.             priority: -20,
  21.             chunks: 'initial',
  22.             reuseExistingChunk: true
  23.           }
  24.         }
  25.       })
  26.     config.optimization.usedExports(true)
  27.   }
  28. }
  1.  

Tree Shaking

config/optimization.js

  1. config.optimization.usedExports(true);
  1.  

src/treeShaking.js

  1. export function square(x) {
  2.   return x * x;
  3. }
  4.  
  5. export function cube(x) {
  6.   return x * x * x;
  7. }
  1.  

在 main.js 中只引用了 cube

  1. import { cube } from './treeShaking';
  2.  
  3. console.log(cube(2));
  1.  

未使用 Tree Shaking

  1. {
  2.   "./src/treeShaking.js": function(
  3.     module,
  4.     __webpack_exports__,
  5.     __webpack_require__
  6.   ) {
  7.     "use strict";
  8.     __webpack_require__.r(__webpack_exports__);
  9.     __webpack_require__.d(__webpack_exports__, "square", function() {
  10.       return square;
  11.     });
  12.     __webpack_require__.d(__webpack_exports__, "cube", function() {
  13.       return cube;
  14.     });
  15.     function square(x) {
  16.       return x * x;
  17.     }
  18.     function cube(x) {
  19.       return x * x * x;
  20.     }
  21.   }
  22. }
  1.  

使用了 Tree Shaking

这里只导出了 cube 函数，并没有将 square 导出去

当然你可以看见 square 函数还是在 bundle 里面，但是在压缩的时候就会被干掉了，因为它并没有被引用

  1. {
  2.   "./src/treeShaking.js": function(
  3.     module,
  4.     __webpack_exports__,
  5.     __webpack_require__
  6.   ) {
  7.     "use strict";
  8.     __webpack_require__.d(__webpack_exports__, "a", function() {
  9.       return cube;
  10.     });
  11.     function square(x) {
  12.       return x * x;
  13.     }
  14.     function cube(x) {
  15.       return x * x * x;
  16.     }
  17.   }
  18. }
  1.  

只有当函数给定输入后，产生相应的输出，且不修改任何外部的东西，才可以安全做shaking的操作

如何使用tree-shaking？

  1. 确保代码是es6格式,即 export，import
  2. package.json中，设置 sideEffects
  3. 确保 tree-shaking 的函数没有副作用
  4. babelrc中设置presets [["@babel/preset-env", { "modules": false }]] 禁止转换模块，交由webpack进行模块化处理
  5. 结合uglifyjs-webpack-plugin

其实在 webpack4 我们根本不需要做这些操作了，因为 webpack 在生产环境已经帮我们默认添加好了，开箱即用！

开启 gzip

CompressionWebpackPlugin.js

  1. const CompressionWebpackPlugin = require('compression-webpack-plugin');
  2.  
  3. module.exports = (config, resolve) => {
  4.   return () => {
  5.     config.plugin('CompressionWebpackPlugin').use(CompressionWebpackPlugin, [
  6.       {
  7.         algorithm: 'gzip',
  8.         test: /\.js(\?.*)?$/i,
  9.         threshold: 10240,
  10.         minRatio: 0.8
  11.       }
  12.     ]);
  13.   };
  14. };
  1.  

课时 5：手写loader实现可选链

本章内容

  1. 什么是 webpack loader
  2. 可选链介绍
  3. loader 实现可选链

什么是 webpack loader

webpack loader 是 webpack 为了处理各种类型文件的一个中间层，webpack 本质上就是一个 node 模块，它不能处理 js 以外的文件，那么 loader 就帮助 webpack 做了一层转换，将所有文件都转成字符串，你可以对字符串进行任意操作/修改，然后返回给 webpack 一个包含这个字符串的对象，让 webpack 进行后面的处理。如果把 webpack 当成一个垃圾工厂的话，那么 loader 就是这个工厂的垃圾分类！

可选链介绍

这里并不是纯粹意义上的可选链，因为 babel 跟 ts 都已经支持了，我们也没有必要去写一个完整的可选链，只是来加深一下对 loader 的理解， loader 在工作当中能帮助我们做什么？

用途 当我们访问一个对象属性时不必担心这个对象是 undefined 而报错，导致程序不能继续向下执行

解释 在 ? 之前的所有访问链路都是合法的，不会产生报错

  1. const obj = {
  2.   foo: {
  3.     bar: {
  4.       baz: 2
  5.     }
  6.   }
  7. }
  8.  
  9. console.log(obj.foo.bar?.baz) //
  10. // 被转成 obj && obj.foo && obj.foo.bar && obj.foo.bar.baz
  11. console.log(obj.foo.err?.baz) // undefined
  12. // 被转成 obj && obj.foo && obj.foo.err && obj.foo.err.baz
  1.  

loader 实现可选链

配置loader，options-chain-loader

config/OptionsChainLoader.js

  1. module.exports = (config, resolve) => {
  2.   const baseRule = config.module.rule('js').test(/.js|.tsx?$/);
  3.   const normalRule = baseRule.oneOf('normal');
  4.   return () => {
  5.     normalRule
  6.       .use('options-chain')
  7.       .loader(resolve('options-chain-loader'))
  8.   }
  9. }
  1.  

其实就是正则替换，loader 将整个文件全部转换成字符串，content 就是整个文件的内容，对 content 进行修改，修改完成后再返回一个新的 content 就完成了一个 loader 转换。是不是很简单？

下面的操作意思就是，我们匹配 obj.foo.bar?. 并把它转成 obj && obj.foo && obj.foo.bar && obj.foo.bar.

options-chain-loader.js

  1. module.exports = function(content) {
  2.   return content.replace(new RegExp(/([\$_\w\.]+\?\.)/,'g'),function(res) {
  3.     let str  = res.replace(/\?\./,'');
  4.     let arrs = str.split('.');
  5.     let strArr = [];
  6.     for(let i = 1; i <= arrs.length; i++) {
  7.       strArr.push(arrs.slice(0,i).join('.'));
  8.     }
  9.     let compile = strArr.join('&&');
  10.     const done = compile + '&&' + str + '.'
  11.     return  done;
  12.   });
  13. };
  1.  

课时 6：webpack编译优化

本章内容

  1. cache-loader
  2. DllPlugin
  3. threadLoader

cache-loader

cache-loader 主要是将打包好的文件缓存在硬盘的一个目录里，一般存在 node_modules/.cache 下，当你再次 build 的时候如果此文件没有修改就会从缓存中读取已经编译过的文件，只有有改动的才会被编译，这样就大大降低了编译的时间。尤其是项目越大时越明显。

此项目使用前后数据对比 3342ms --> 2432ms 效果还是比较明显

这里只对 babel 加入了 cache-loader，因为我们的 ts/js 都是由 babel 进行编译的，不需要对 ts-loader 缓存（我们也没有用到）

config/cacheLoader.js

  1. module.exports = (config, resolve) => {
  2.   const baseRule = config.module.rule('js').test(/.js|.tsx?$/);
  3.   const babelPath = resolve('babel.js')
  4.   const babelConf = require(babelPath);
  5.   const version = require(resolve('node_modules/@babel/core/package.json')).version
  6.   return () => {
  7.     baseRule
  8.       .exclude
  9.       .add(filepath => {
  10.         // 不缓存 node_modules 下的文件
  11.         return /node_modules/.test(filepath)
  12.       })
  13.       .end()
  14.       .use('cache-loader')
  15.       .loader('cache-loader')
  16.       .options({
  17.         // 缓存位置
  18.         cacheDirectory: resolve('node_modules/.cache/babel')
  19.       })
  20.   }
  21. }
  1.  

DllPlugin

DllPlugin 是将第三方长期不变的包与实际项目隔离开来并分别打包，当我们 build 时再将已经打包好的 dll 包引进来就 ok 了

我提取了两个包 vue、react，速度差不多提升了 200ms，从 2698ms 到 2377ms

打包 dll

build/dll.js

  1. const path = require("path");
  2. const dllPath = path.join(process.cwd(), 'dll');
  3. const Config = require('webpack-chain');
  4. const config = new Config();
  5. const webpack = require('webpack')
  6. const rimraf = require('rimraf');
  7. const ora = require('ora')
  8. const chalk = require('chalk')
  9. const BundleAnalyzerPlugin = require('../config/BundleAnalyzerPlugin')(config)
  10.  
  11. BundleAnalyzerPlugin()
  12. config
  13.   .entry('dll')
  14.   .add('vue')
  15.   .add('react')
  16.   .end()
  17.   .set('mode', "production")
  18.   .output
  19.   .path(dllPath)
  20.   .filename('[name].js')
  21.   .library("[name]")
  22.   .end()
  23.   .plugin('DllPlugin')
  24.   .use(webpack.DllPlugin, [{
  25.     name: "[name]",
  26.     path: path.join(process.cwd(), 'dll', 'manifest.json'),
  27.   }])
  28.   .end()
  29.  
  30. rimraf.sync(path.join(process.cwd(), 'dll'))
  31. const spinner = ora('开始构建项目...')
  32. spinner.start()
  33.  
  34. webpack(config.toConfig(), function (err, stats) {
  35.   spinner.stop()
  36.   if (err) throw err
  37.   process.stdout.write(stats.toString({
  38.     colors: true,
  39.     modules: false,
  40.     children: false,
  41.     chunks: false,
  42.     chunkModules: false
  43.   }) + '\n\n')
  44.  
  45.   if (stats.hasErrors()) {
  46.     console.log(chalk.red('构建失败\n'))
  47.     process.exit(1)
  48.   }
  49.   console.log(chalk.cyan('build完成\n'))
  50. })
  1.  

将 dll 包合并

  1. const webpack = require('webpack')
  2.  
  3. module.exports = (config, resolve) => {
  4.   return () => {
  5.     config.plugin('DllPlugin')
  6.       .use(webpack.DllReferencePlugin, [{
  7.         context: process.cwd(),
  8.         manifest: require(resolve('dll/manifest.json'))
  9.       }])
  10.   }
  11. }
  1.  

threadLoader

测试效果变差了

一步步从零开始用 webpack 搭建一个大型项目的更多相关文章

  1. 从零开始使用vue-cli搭建一个vue项目及注意事项

    一.安装node.js 1.根据电脑的自行下载node.js安装包http://nodejs.cn 2.点击安装,按照正常的的一路点击下去 3.验证安装是否成功,按键win+r,输入cmd打开命令行工 ...

  2. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

  3. 从零开始用 Flask 搭建一个网站（一）

    前言 笔者之前未接触过 Python,只是略懂一点前端,所以说从零开始也相差无几吧.Flask 是一个轻量级的基于 Python 的框架,但是扩展性非常良好(Github 上 22000 多个 sta ...

  4. vue-用Vue-cli从零开始搭建一个Vue项目

    Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...

  5. 从零开始使用 Webpack 搭建 Vue3 开发环境

    从零开始使用 Webpack 搭建 Vue3 开发环境 创建项目 首先需要创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目,这个过程会提示输入一些内容,完成后会自动生成一个 ...

  6. 从零开始用 Flask 搭建一个网站（三）

    从零开始用 Flask 搭建一个网站(二) 介绍了有关于数据库的运用,接下来我们在完善一下数据在前端以及前端到后端之间的交互.本节涉及到前端,因此也会讲解一下 jinja2 模板.jQuery.aja ...

  7. 从零开始用 Flask 搭建一个网站（二）

    从零开始用 Flask 搭建一个网站(一) 介绍了如何搭建 Python 环境,以及 Flask 应用基本项目结构.我们要搭建的网站是管理第三方集成的控制台,类似于 Slack. 本篇主要讲解数据如何 ...

  8. 从零开始用 Flask 搭建一个网站（四）

    前言 从零开始用 Flask 搭建一个网站(三) 介绍了网页前端与后端.前端与前端之间数据的交流.本节主要介绍一下如何应用 Flask-OAuthlib, 使用 Flask-OAuthlib 就可以轻 ...

  9. 完整搭建一个vue项目

    目录 一. 搭建一个vue项目的完整步骤 二. 卸载vue-cli 三. 完全卸载webpack 一. 搭建一个vue项目的完整步骤 1.安装node.js 下载地址 # 检查是否安装成功 node ...

随机推荐

  1. vuex 源码分析(七) module和namespaced 详解

    当项目非常大时,如果所有的状态都集中放到一个对象中,store 对象就有可能变得相当臃肿. 为了解决这个问题,Vuex允许我们将 store 分割成模块(module).每个模块拥有自己的 state ...

  2. HDU-1760 A New Tetris Game DFS

    曾经,Lele和他姐姐最喜欢,玩得最久的游戏就是俄罗斯方块(Tetris)了. 渐渐得,Lele发觉,玩这个游戏只需要手快而已,几乎不用经过大脑思考. 所以,Lele想出一个新的玩法. Lele和姐姐 ...

  3. sql server 下载安装标记

    SQL Server 2017 的各版本和支持的功能 https://docs.microsoft.com/zh-cn/sql/sql-server/editions-and-components-o ...

  4. 如何当上Leader和六千个bug的系统

    在昨天的读书会上我分享了我是如何当上leader以及当上leader之后的体会.然后今天Sophie总结了我的发言,大家对此有些反馈.我根据大家的反馈写了这篇文章,主要针对几点: 大家如何当上lead ...

  5. SqlServer 开篇简介

    实例:我们的电脑中可以安装一个或多个SqlServer实例,每一个SqlServer实例可以包含一个或者多个数据库. 架构:数据库中,又有一个或者多个架构.架构里面包含:表,视图,存储过程. 文件与文 ...

  6. 如何使用Charles让手机访问PC自定义域名？

    需求:移动端访问PC上的自定义域名,如在Nginx上配置的域名 ​ 如vv.zzcloud.com这个域名在pc上是通过host映射的方式访问,现在需要在手机上访问到这个域名. 工具:Charles代 ...

  7. Vue 动态修改data 值 并触发视图更新

    Vue 动态修改data 值 并触发视图更新 this.$set(obj, key, '') // Vue 动态修改或者添加data key 并触发视图更新

  8. 【APS系统应用案例】高博通信智能制造的新武器

    企业背景: 早在2006年,一个年轻的企业瞄准国际高端航空产业及超精密制造行业.高博集团,以普世价值开创航空中国的新纪元. 高博通信(上海)有限公司(下文简称“高博通信”)占地36000平方米,以满足 ...

  9. android studio学习----gradle多渠道打包

    由于国内Android市场众多渠道,为了统计每个渠道的下载及其它数据统计,就需要我们针对每个渠道单独打包,如果让你打几十个市场的包岂不烦死了,不过有了Gradle,这再也不是事了. 友盟多渠道打包 废 ...

  10. HeadFirst设计模式---装饰者

    定义装饰者模式 装饰者模式动态地将责任附加到对象上,若要扩展功能,装饰者提供了比继承更有弹性的替代方案.这句话摘自书中,给人读得很生硬难懂.通俗地来说,装饰者和被装饰者有相同的父类,装饰者的行为组装着 ...