webpack工程化

概念

本质：通过编译打包是项目开发版和上线版完全分离

原理：模块打包，把模块接收并进行处理，最后生成几个静态资源文件，最后项目引入资源文件

强大的功能：懒加载，代码分割，Tree Shaking

webpack打包工具模块：打包过程中代码转换与项目代码与结构优化的一系列工具集合

  1. uglifyjs-webpack-plugin: 压缩混淆JS插件
  2. html-webpack-plugin：压缩HTML注入脚本插件
  3. autoprefixer：自动添加CSS兼容性前缀插件
  4. clean-webpack-plugin：清除多余文件插件
  5. babel-loader/babel-core/babel-preset-latest：ES6脚本代码转换工具模块
  6. ejs/ejs-loader：模板文件编译工具模块
  7. css-loader/postcss-loader/style-loader：编译CSS样式代码并放入html内部样式表的工具模块
  8. file-loader/url-loader/img-loader/image-webpack-plugin：对图片文件进行压缩及目录位置移动的工具模块与插件
  9. sass-loader/node-sass：编译sass文件

结构

  1. dist - 上线文件夹
  2. src - 打包配置文件夹
  3. webpack.config.js - 打包配置文件
  4. package-lock.json - 记录安装包版本与来源
  5. package.json - 记录项目所需要模块信息
  7. dist > css/fonts/js/scripts - 静态文件文件夹
  8. src > components - 组件文件夹
  9. src > css - 样式文件夹
  10. src > img - 图片文件夹
  11. src > js - 逻辑层脚本文件夹
  12. src > models - 模型层脚本文件夹
  13. src > utils - 工具模块文件夹
  14. src > index.html - 视图层HTML文件

组件化

组件化目录结构：对应页面的组件

  1. src > components 
  2.       > cart/detail/haader/index目录 
  3.         > list_item组件文件夹 
  4.           > index.tpl/index.js/index.scss

关于index.js入口文件：

  • 如果在组件文件里(src/components/header/list_item/index.js)， 就为组件的入口文件，负责引入scss/tpl文件且导出一个函数返回一个带名字和模板的对象
  • 如果在项目JS目录下(src/js/index.js)，就为逻辑层的主JS文件，负责每个页面的主入口，引入所有组件页面，引入数据模型，且对DOM进行操作，页面渲染
  • 如果在模型层目录下(src/models/index.js)，每个页面对应的异步数据请求(ajax/axios)，组合成html字符串

工具集合

  1. src > utils 
  2.  - config.js：配置API接口的地址
  3.  - http.js：封装的ajax函数
  4.  - tool.js：处理事件/正则等

模块

工程化 - 图1

webpack

好处：

  • 只加载一个js文件
  • 对引入文件的来源有记录import xx from './xxx'
  • 会翻译关键字import代码

缺点：

  • 只知道模块相关的事情(仅仅是模块打包工具)
  • 刚开始只支持js类型的模块文件
  • 后续其他模块类型需要配置

安装

  1. //安装webpack
  2. npm i -D webpack@4.45.0
  4. //安装webpack-cli 可以在命令行工具输入webpack相关命令
  5. npm i -D webpack-cli@3.3.10

使用

  1. //基础命令webpack
  2. //执行npx webpack文件翻译index.js
  3. npx webpack ./src/js/index.js
  5. //打包成功生成 dist/main.js(翻译后的代码)

配置

  1. //配置webpack.config.js
  3. //node只支持commonjs写法
  4. const path = require('path');
  6. module.exports = {
  7.   entry: path.resolve(__dirname, 'src/js/index.js'),
  8.   output: {
  9.     //dist目录默认输出main.js，此时更改名为bundle.js
  10.     filename: 'bundle.js',
  11.     //出口目录为dist里面的bundle.js文件
  12.     path: path.resolve(__dirname, 'dist')
  13.   }
  14. }

更名

  1. //一般情况，webpack会自动寻找webpack.config.js配置文件
  2. //假如需要更改webpack.config.js => webpack.dev.config.js
  3. //1.更改名称为webpack.dev.config.js
  4. //2.脚本更改命令 dev => webpack --config webpack.dev.config.js

入口

entry入口不设置名称情况下默认打包后名称为dist/main.js

  1. //entry可以同时配置多个入口 如主入口和子入口
  2. module.exports = {
  3.   ...,
  4.   entry: {
  5.     main: path.resolve(__dirname, 'src/js/index.js'),
  6.     sub: path.resolve(__dirname, 'src/js/index.js')
  7.   },
  8.   output: {
  9.     //会根据main/sub.js生成
  10.     filename: '[name].js',
  11.     path: path.resolve(__dirname, 'dist')
  12.   },
  13. }
  15. //此时，dist目录下生成main.js和sub.js

加载器

属于webpack模块里

  1. //配置模块规则
  2. //module对象 => rules数组 => 对象里配置

处理css, jpg, png, scss 需要loader处理相应的模块

图片处理

使用场景：

  • 如果图片较大，bundle.js文件里base64图片地址代码过长，造成bundle.js文件体积过大，影响页面加载速度，推荐用file-loader生成jpg文件
  • 如果图片较小，因为通过file-loader生成jpg文件时多发送一次HTTP请求，所以推荐url-loader生成base64地址

file-loader

  1. //处理图片
  2. //安装file-loader
  3. npm i -D file-loader@6.2.0
  5. //配置模块规则
  6. //module对象 => rules数组 => 对象里配置
  7. module.exports = {
  8.   ...,
  9.   module: {
  10.     rules: [{
  11.       test: /\.jpg|jpeg$/,
  12.       use: {
  13.         loader: 'file-loader',
  14.         //对file-loader进行配置
  15.         options: {
  16.           //对生成后的图片名称改为指定的名称
  17.           //如cat.jpg => cat.jpg
  18.           name: '[name].[ext]',
  19.           //将生成后图片文件放入指定的目录
  20.           //如此一来，打包后图片将存放在dist/imgs/目录里
  21.           outputPath: 'imgs/'
  22.         }
  23.       }
  24.     }]
  25.   }
  26. }
  1. //尝试引入图片 并打印
  2. import catImg from '../cat.jpg';
  3. console.log(catImg);
  5. //重新打包
  7. //浏览器控制台打印
  8. f4138709b57185fb12c8f07bbdbc38c1.jpg
  10. //并发现dist目录下生成名字为xxxxxxxxxx.jpg的图片
  12. //尝试插入图片到页面
  13. const img = new Image();
  14. img.src = '../dist/' + catImg;
  15. app.appendChild(img);
  17. //页面显示图片成功

url-loader

  1. //利用url-loader也可以处理图片
  2. //与file-loader相似，但是返回DataUrl，即base64格式图片地址
  4. //安装url-loader
  5. npm i -D url-loader@4.1.1
  7. //配置模块规则
  8. //module对象 => rules数组 => 对象里配置
  9. module.exports = {
  10.   ...,
  11.   module: {
  12.     rules: [{
  13.       test: /\.jpg|jpeg$/,
  14.       use: {
  15.         loader: 'url-loader',
  16.         //对file-loader进行配置
  17.         options: {
  18.           //对生成后的图片名称改为指定的名称
  19.           //如cat.jpg => cat.jpg
  20.           name: '[name].[ext]',
  21.           //将生成后图片文件放入指定的目录
  22.           //如此一来，打包后图片将存放在dist/imgs/目录里
  23.           outputPath: 'imgs/'
  24.         }
  25.       }
  26.     }]
  27.   }
  28. }
  30. //发现dist目录没有图片文件，但页面正常渲染图片
  31. //查看图片元素地址为data:image/jpeg;base64xxxxxx开头的地址

配置：灵活根据图片大小来选择加载器生成图片或生成图片地址

  1. module.exports = {
  2.   ...,
  3.   module: {
  4.     rules: [{
  5.       test: /\.jpg|jpeg$/,
  6.       use: {
  7.         loader: 'url-loader',
  8.         //对file-loader进行配置
  9.         options: {
  10.           ...,
  11.           //如图片大于2048字节，单独生成文件
  12.           //如图片很小，生成base64地址
  13.           limit: 20480
  14.         }
  15.       }
  16.     }]
  17.   }
  18. }

处理样式

css-loader&style-loader

  1. //安装
  2. npm i -D css-loader@5.0.1
  3. npm i -D style-loader@2.0.0
  5. //配置
  6. module.exports = {
  7.   ...,
  8.   module: {
  9.     rules: [
  10.     ...,
  11.     {
  12.       test: /\.css$/,
  13.       //loader执行顺序：从后往前/从下往上
  14.       use: ['style-loader', 'css-loader']
  15.     }]
  16.   }
  17. }
  19. //打包后成功显示样式

sass-loader&node-sass

  1. //安装
  2. npm i -D sass-loader@10.1.1
  3. npm i -D node-sass@5
  5. //配置
  6. //将原来匹配css改变为匹配scss
  7. module.exports = {
  8.   ...,
  9.   module: {
  10.     rules: [
  11.     ...,
  12.     {
  13.       test: /\.scss$/,
  14.       use: ['style-loader', 'css-loader', 'sass-loader']
  15.     }]
  16.   }
  17. }
  19. //打包后成功显示样式

处理前缀

postcss-loader&autoprefixer

  1. //低版本浏览器没有css3里面的transform: rotate(45deg);
  2. //如何兼容？ postcss-loader结合autoprefixer
  3. //autoprefixer可以增加厂商前缀 如-webkit-tranform: rotate(45deg)
  5. //安装
  6. cnpm i -D postcss-loader@4.1.0
  7. cnpm i -D autoprefixer@10.2.3
  9. //配置
  10. module.exports = {
  11.   ...,
  12.   module: {
  13.     rules: [
  14.     ...,
  15.     {
  16.       test: /\.scss$/,
  17.       use: [
  18.         'style-loader', 
  19.         'css-loader', 
  20.         //webpack老版本写法 兼容4.x以下
  21.         {
  22.           loader: 'css-loader',
  23.           options: {
  24.             importLoaders: 2
  25.           }
  26.         }
  27.         'postcss-loader', 
  28.         'sass-loader'
  29.       ]
  30.     }]
  31.   }
  32. }
  34. //需要在项目根目录新建postcss.config.js且配置
  35. module.exports = {
  36.   plugins: [
  37.     //引入插件
  38.     require('autoprefixer')
  39.   ]
  40. }
  42. //package.json配置增加
  43. "browserslist": [
  44.   //针对市场份额大于1%
  45.   "> 1%",
  46.   //最近两个版本
  47.   "last 2 versions"
  48. ]
  50. //打包后成功显示样式

处理字体

iconfont字体库下载字体

将字体文件放入src/css/fonts

  1. module.exports = {
  2.   ...,
  3.   module: {
  4.     rules: [ 
  5.       ...,
  6.       {
  7.       test: /\.(svg|eot|ttf|woff|woff2)$/,
  8.       use: {
  9.         loader: 'file-loader',
  10.         options: {
  11.           name: '[name].[ext]',
  12.           outputPath: 'fonts/',
  13.         }
  14.       }
  15.     }]
  16.   }
  17. }
  19. //将字体css样式放入index.scss里
  20. @font-face {
  21.   font-family: "iconfont"; /* Project id 2738996 */
  22.   src: url('../fonts/iconfont.woff2?t=1634310802163') format('woff2'),
  23.        url('../fonts/iconfont.woff?t=1634310802163') format('woff'),
  24.        url('../fonts/iconfont.ttf?t=1634310802163') format('truetype');
  25. }
  1. //渲染字体
  2. const app = document.getElementById('app');
  3. app.innerHTML = '<div class="iconfont iconaixin"></div>';
  5. //图标字体成功显示

插件

webpack里面的插件

  1. plugins: []

dist目录生成html文件

html-webpack-plugin

  1. //安装
  2. npm i -D html-webpack-plugin@4.5.1
  4. //配置
  5. const HtmlWebpackPlugin = require('html-webpack-plugin');
  7. module.exports = {
  8.   ...,
  9.   plugins: [
  10.     new HtmlWebpackPlugin()
  11.   ]
  12. }
  14. //打包完成时dist目录下自动创建除了引用bundle.js以外的空白的index.html文件
  16. //为了解决空白的index.html，可以提供模板scr/index.html
  17. //配置
  18. module.exports = {
  19.   ...,
  20.   plugins: [
  21.     new HtmlWebpackPlugin({
  22.       template: './src/index.html'
  23.     })
  24.   ]
  25. }
  27. //再打包后发现dist目录重新生成指定模板的index.html文件

清理dist目录文件的插件

clean-webpack-plugin

  1. //安装
  2. npm i -D clean-webpack-plugin@3.0.0
  4. //引入且配置
  5. const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  7. module.exports = {
  8.   ...,
  9.   plugins: [
  10.     new CleanWebpackPlugin()
  11.   ]
  12. }
  14. //打包后发现dist目录先清除后被存入打包文件

sourceMap

帮助于调试代码

默认控制台错误会跟踪到dist/main.js 而不是src/js/index.js

利用sourcemap设置可以实现

  1. //配置项
  2. module.exports = {
  3.   ...,
  4.   //源文件 速度最快
  5.   devtool: 'eval-source-map',
  6.   //生成映射关系的map文件 dist/main.js.map 速度稍快
  7.   //devtool: 'cheap-module-source-map',
  8. }

开发服务

webpack-dev-server

注意：使用webpackDevServer是不会生成dist打包文件，但会在内存里生成打包文件，提高效率

提供一个开发服务器实现实时网页更新，不需要频繁的输入打包命令

  1. //安装
  2. npm i -D webpack-dev-server@3
  4. //配置
  5. module.exports = {
  6.   ...,
  7.   devServer:{
  8.     //指向dist目录
  9.     contentBase: './dist'，
  10.     //指定端口
  11.     prot: 3000
  12.   }
  13. }
  15. //修改脚本命令
  16. "dev": "webpack-dev-server"

请求转发

使用指定的地址访问指定API地址

  1. //安装axios请求API数据
  2. import axios from 'axios';
  3. axios.get('http://study.jsplusplus.com/Yixiantong/getHomeDatas')
  4.   .then(res => console.log(res));

一般来说，本地接口跟线上接口很有可能不在同一台服务器上，意味着上面的绝对路径接口地址就不好用了，所以一般会改为相对路径

  1. axios.get('/Yixiantong/getHomeDatas')
  2.   .then(res => console.log(res));
  4. //报错：GET http://localhost:8080/Yixiantong/getHomeDatas 404 (Not Found)

但是改为相对路径会报错，所以这样的情况可以做相对接口的请求转发

  1. //当请求http://localhost:8080/Yixiantong时通过webpackDevServer帮助转发给http://study.jsplusplus.com/域名
  3. //配置
  4. module.exports = {
  5.   ...,
  6.   devServer:{
  7.     //指向dist目录
  8.     contentBase: './dist',
  9.     open: true,
  10.     proxy: {
  11.       //一旦访问匹配到指定开头的路径
  12.       //'/Yixiantong'
  13.       //'api/Yixiantong'
  14.       //以api开头
  15.       '/api': {
  16.         //转发到目标的域名地址
  17.         target: 'http://study.jsplusplus.com/',
  18.         //对源做了限制
  19.         changeOrigin: true,
  20.         //针对请求地址是https时
  21.         secure: false,
  22.         //如果有指定的写法 如api/Yixiantong 
  23.         //访问http://study.jsplusplus.com/api/Yixiantong 
  24.         //可以对其路径重写
  25.         pathRewrite: {
  26.           //去掉api
  27.           '^/api': ''
  28.         }
  29.       }
  30.     }
  31.   }
  32. }
  34. //此时可以正常访问到API数据

自动刷新

页面刷新

WDS

webpackDevServer 提供一个配置可以定时的去刷新打包打包并刷新页面重新加载静态资源文件

注意：webpackDevServer都是针对开发环境来实现的，生产环境无法使用

  1. //自动刷新控制台提示
  2. [WDS]Live Reloading enabled.
  1. //配置
  2. module.exports = {
  3.   ...,
  4.   //监听源代码变化，如有变化重新打包
  5.   watch: true,
  6.   watchOption: {
  7.     ignored: /node_modules/,
  8.     //不想刷新的太快
  9.     aggregateTimeout: 300,
  10.     //每隔一定时间去询问系统，文件是否存在更改
  11.     poll: 1000
  12.   }
  13. }

热更新

热更新HMR提供实时数据跟新

问题：为什么需要HMR?

如点击或者输入事件时，不能实时更新内容，不会实时渲染

自动刷新和热更新区别：

自动刷新只是重新加载静态文件刷新页面，会导致状态丢失，如输入文本的内容丢失，变量声明的丢失等，热更新则保留状态

  1. //热更新控制台提示
  2. [HMR]Waiting for update signal from WDS...
  1. //引入插件
  2. //webpack内置的HotModuleReplacementPlugin
  3. const webpack = require('webpack');
  5. //配置
  6. module.exports = {
  7.   ...,
  8.   devServer:{
  9.     ...,
  10.     //开启HMR
  11.     hot: true
  12.   },
  13.   plugins: [
  14.     new webpack.HotModuleReplacementPlugin()
  15.   ]
  16. }
  18. //控制台显示(说明热更新启动成功)
  19. [HMR] Waiting for update signal from WDS...
  20. [WDS] Hot Module Replacement enabled.
  21. [WDS] Live Reloading enabled.
  1. //webpack-dev-server3.9.0版本 配置写法
  2. //引入热更新插件
  3. const WebpackCommonConfig = require('./webpack/lib/HotModuleReplacementPlugin');
  5. module.exports = {
  6.   ...,
  7.   entry: {
  8.     index: path.join(srcPath, 'index.js'),
  9.     index:[
  10.       'webpack-dev-server/client?http://localhost:8080/',
  11.       'wepack/hot/dev-server',
  12.       path.join(srcPath, 'index.js')
  13.     ]
  14.   },
  15.   devServer:{
  16.     ...,
  17.     //开启HMR
  18.     hot: true
  19.   },
  20.   plugins: [
  21.     new webpack.HotModuleReplacementPlugin()
  22.   ]
  23. }

如果是样式刷新，热更新是会生效的，且保留状态(style.loader底层有代码实现)

如果是逻辑代码刷新，热更新会失效，不保留状态，需要继续配置

  1. //逻辑代码里
  2. //如果开启了 热更新
  3. if(module.hot){
  4.   //参数1： 热更新监测范围
  5.   //参数2： 热更新后回调自定义的代码内容
  6.   //只有修改math.js里的代码会触发热更新
  7.   module.hot.accept(['./math.js'], ()=>{
  8.     console.log('hello');
  9.   });
  10. }

es6

处理es6代码

babel-loader&@babel/core&@babel/preset-env

  1. //安装
  2. npm i -D babel-loader@8.2.2
  3. npm i -D @babel/core@7.12.10
  4. npm i -D @babel/preset-env@7.12.11
  6. //配置
  7. module.exports = {
  8.   ...,
  9.   module: {
  10.     rules: [
  11.       ...,
  12.       {
  13.         test: /\.js$/,
  14.         loader: 'babel-loader',
  15.         options: {
  16.           presets: ['@babel/preset-env']
  17.         },
  18.         exclude: /node_modules/
  19.       }
  20.     ]
  21.   }
  22. }

@babel/polyfill

解决promise和map方法的实现(早期es3没有)

关于：corejs

一个标准的库，提供polyfill es6 es7等方法实现

  1. //安装
  2. npm i -D @babel/polyfill@7.12.1
  4. //引入
  5. import '@babel/polyfill';
  7. const promiseArray = [
  8.   new Promise(()=>{}),
  9.   new Promise(()=>{})
  10. ];
  12. promiseArray.map(promise => {
  13.   console.log('promise', promise);
  14. });
  16. //使用了polyfill后 打包后 体积更大
  17. //实现了es6新特性 箭头函数等
  19. //按需加载新特性配置
  20. module.exports = {
  21.   ...,
  22.   module: {
  23.     rules: [
  24.       ...,
  25.       {
  26.         test: /\.js$/,
  27.         loader: 'babel-loader',
  28.         options: {
  29.           presets: [
  30.             ['@babel/preset-env'], {
  31.               useBuiltIns: 'usage'，
  32.               //版本号：3
  33.               corejs: 3
  34.             }
  35.           ]
  36.         },
  37.         exclude: /node_modules/
  38.       }
  39.     ]
  40.   }
  41. }

babel/plugin-transform-runtime开发依赖

babel/runtime生存依赖

帮助polyfill改变内库，内部插件 造成的全局污染问题

  1. //安装 
  2. npm i -D @babel/plugin-transform-runtime@7.15.8
  3. npm i -S @babel/runtime@7.15.4
  5. //配置
  6. module.exports = {
  7.   ...,
  8.   module: {
  9.     rules: [
  10.       ...,
  11.       {
  12.         test: /\.js$/,
  13.         loader: 'babel-loader',
  14.         options: {
  15.           plugins: [
  16.             ['@babel/plugin-transform-runtime', {
  17.               "absoluteRuntime": false,
  18.               "corejs": 3,
  19.               "helpers": true,
  20.               "regenerator": true,
  21.               "useESModules": false,
  22.               "version": "7.0.0-beta.0"
  23.             }]
  24.           ]
  25.         },
  26.         exclude: /node_modules/
  27.       }
  28.     ]
  29.   }
  30. }

.babelrc

专属配置babel的文件

主要写两个配置项presets/plugins数组

  1. {
  2.   "presets": [
  3.     [
  4.       "@babel/preset-env",
  5.       {
  6.         "useBuiltIns": "usage",
  7.         "corejs":3
  8.       }
  9.     ]
  10.   ],
  11.   "plugins": [
  12.     [
  13.       "@babel/plugin-transform-runtime",
  14.       {
  15.         "absoluteRuntime": false,
  16.         "corejs": 3,
  17.         "helpers": true,
  18.         "regenerator": true,
  19.         "useESModules": false,
  20.         "version": "7.0.0-beta.0"
  21.       }
  22.     ]
  23.   ]
  24. }

Tree Shaking

使用tree shaking概念智能的去除没有使用的代码再打包

注意：只支持ES Module规范，不支持CommonJS规范

  1. //只需要配置生产模式即可触发tree shaking打包不引用的代码 
  2. mode: 'production'

关于ES Module 和 CommonJS:

  • ES Module 是静态引入 编译时引入 import xxx from 'xxx' 只能写在首行 不能嵌套在if语句或函数内
  • CommonJS 是动态引入 执行时引入 const xxx = require('xxx')

chunks

块

将处理过的css/js/scss文件处理成块 再处理变成静态文件供网页加载

代码分割

splitChunks分割出一个个的chunks，无论同步引入还是异步引入分割

  1. //场景：默认情况会依次打包，所以lodash会被打包2次
  2. //a.js(lodash + a业务代码 + 公共代码a)
  3. //b.js(lodash + b业务代码 + 公共代码a)
  5. //如何实现代码分割？
  6. //将lodash提取并单独打包成为一个叫vendor.js文件
  7. //将公共代码a提取并单独打包成为一个叫common.js文件
  8. //最终，并再需要的时候引入vendor.js或common.js文件
  9. //实现代码体积减少
  11. optimization: {
  12.   splitChunks: {
  13.     chunks: 'all'
  14.   }
  15. }

babel

babeljs.io

JavaScript的编译器

转码前(es5 -> es6)需要插件plugins， 预设presets将包含所有的插件

  1. {
  2.   "presets": [
  3.     [
  4.       "@babel/preset-env"
  5.     ]
  6.   ],
  7.   "plugins": [
  9.   ]
  10. }

关于babel-polyfill(7.4已废弃)已经包含corejs 和 regenerator，废弃后直接可以用babel直接引用

babel 集成了corejs 和 regenerator，corejs包含了ES6 新语法特性 polyfill(实现)，多人维护，比较可靠

缺点：不支持ES6特性的实现(generator 函数)

  1. //关于generator函数
  2. function* test(){
  3.   console.log('settle a');
  4.   yield 'a';
  6.   console.log('settle b');
  7.   yield 'b';
  8. }
  10. let res = test();
  12. console.log(res.next());
  13. console.log(res.next());
  14. console.log(res.next());

需要另外的库去实现generator函数，叫regenerator, 帮助定义generator函数，如何实现方法

  1. //安装并引入@babel/polyfill
  2. import '@babel/polyfill';
  4. //编译代码
  5. npx babel ./src/index.js
  7. //编译后的代码可以在浏览器内运行了

优化

如何提高webpack性能优化？(开发模式)

  • 优化打包构建速度

    • 优化babel-loader编译范围(越少越好)
    • IgnorePlugin避免不必要的模块
    • noParse避免打包已经打包过的模块
    • happyPack/ParalelUglifyPlugin多进程打包
    • 自带刷新，热更新
    • DllPlugin预先打包一次

  • 优化打包文件体积

    • 图片较少时，采用base64编码格式
    • 哈希值
    • 懒加载
    • 代码分割

忽略插件

IgorePlugin()

  1. plugins: [
  2.   //忽略moment时间地区插件里除了中国地区以外的时间和地区语言包代码
  3.   new webpack.IgorePlugin(/.\/locale/, /moment/)
  4. ]

不打包

noParse

不做打包，但打包生成的代码里有相关代码

  1. noParse: [/vue\.min\.js/],
  2. mode: ...

多线程打包

NodeJS 基于JS 单线程

Webpack 基于 NodeJS 单线程 开启多线程打包 提高打包速度

happyPack帮助开启多进程打包

  1. //安装
  2. npm i -D happypack@5.0.1
  4. //引入和配置
  5. const HappyPack = require('happypack');
  7. module.exports = {
  8.   ...,
  9.   module: {
  10.     rules: [
  11.       ...,
  12.       {
  13.         test: /\.js$/,
  14.         use: ['happypack/loader?id=babel']
  15.       }
  16.     ]
  17.   }，
  18.   plugins: [
  19.     new HappyPack({
  20.       id: 'babel',
  21.       loaders: ['babel-loader?cacheDirectory']
  22.     })
  23.   ]
  24. }

代码压缩

UglifyjsWebpackPlugin

压缩js代码

  1. //安装
  2. npm i -D webpack-parallel-uglify-plugin@1.1.2
  4. //引入和配置
  5. const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
  7. module.exports = {
  8.   ...,
  9.   plugins: [
  10.     new ParallelUglifyPlugin({
  11.       uglifyJS: {
  12.         beautify: false,
  13.         comments: false
  14.       }
  15.     })
  16.   ]
  17. }

动态连接库

DLLPlugin

提高打包构建速度

预先打包一次 存放某一个地方 使用的时候引用，类似vue/react，优化打包构建速度

  1. //针对dll的配置
  2. //webpack.dll.conf.js
  4. //引入webpack自带的dll插件
  5. const DllPlugin = require('webpack/lib/DLLPlugin');
  9. module.exports = {
  10.   mode: 'development',
  11.   entry: {
  12.     //当项目引入react/react-dom的时候会打包到/dist/react.js文件里
  13.     react: ['react', 'react-dom']
  14.   },
  15.   output: {
  16.     //打包生成 bundle 的名字 react.dll.js
  17.     filename: '[name].dll.js',
  18.     //distPath
  19.     path: path.join(__dirname, '..', 'dist'),
  20.     //srctPath
  21.     //path: path.join(__dirname, '..', 'src'),
  22.     //定义全局变量 _dll_react 在react.dll.js文件里
  23.     library: '_dll_[name]'
  24.   },
  25.   plugins: [
  26.     new DllPlugin({
  27.       name: '_dll_[name]',
  28.       //mainfest.json 是一个映射的文件 把相关不同的js文件做不同的映射
  29.       path: path.join(distPath, '[name].mainfest.json')
  30.     }),
  31.     new DllReferencePlugin()
  32.   ]
  33. }
  1. //脚本
  2. "dll": "webpack --config build/webpack.dll.conf.js"
  1. //webpack.dev.conf.js
  2. //引入DllReferencePlugin
  3. const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
  5. module.exports = {
  6.   ...,
  7.   plugins: [
  8.     new DllReferencePlugin({
  9.       //使用dist/react.mainfest.json文件
  10.       mainfest: require(path.join(distPath, 'react.mainfest.json'))
  11.     })
  12.   ]
  13. }

处理顺序：

当逻辑代码里引入import React from 'react';/importReactDOM from 'react-dom';会打包成相应的配置和映射文件

减少代码体积的目的：

  • 减少代码体积
  • 合理分包，不重复加载
  • 内存占用更少

哈希值

利用output设置哈希值实现唯一文件内容加载，避免浏览器缓存加载

  1. output: {
  2.   filename: '[name].[contentHash:8].js',
  3.   path: distPath
  4. }

懒加载

  1. setTimeout(()=>{
  2.   import('./test.js');
  3. }, 3000);