关于webpack

禾羽呀
174 阅读6分钟

什么是webpack

webpack是node的一个第三方模块包，用于打包代码
javascript 应用程序的 静态模块打包器 (module bundler)
为要学的vue-cli开发环境做铺垫
可以把很多文件打包整合到一起，缩小项目体积，提高加载速度



准备工作

image.png

image.png




安装webpack相关的包

yarn init -y

yarn add webpack webpack-cli -D




配置文件设置

image.png

image.png




打包的模式

image.png




模块化的写法

image.png




loaders加载器

Loader 加载器 识别非js文件

webpack 只能理解 JavaScript文件，这是 webpack 开箱可用的自带能力。loader让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。




配置css相关加载器

image.png

image.png

image.png

image.png

模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。

应保证 loader 的先后顺序：'style-loader' 在前，而 'css-loader' 在后。如果不遵守此约定，webpack 可能会抛出错误。

webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这个示例中，所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader。

这使你可以在依赖于此样式的 js 文件中 import './style.css'。现在，在此模块执行过程中，含有 CSS 字符串的  标签，将被插入到 html 文件的  中。

再次在浏览器中打开 dist/index.html，你应该看到 Hello webpack 现在的样式是红色。要查看 webpack 做了什么，请检查页面（不要查看页面源代码，它不会显示结果，因为  标签是由 JavaScript 动态创建的），并查看页面的 head 标签。它应该包含 style 块元素，也就是我们在 index.js 中 import 的 css 文件中的样式。




插件plugins

插件(plugin) 除了loader做的事情 其他的事情都属于插件

loader 用于转换某些类型的模块（非js模块），而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。插件主要是用来扩展 webpack 能力，插件目的在于解决loader无法实现的其他事。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。 image.png




css抽取

webpack.docschina.org/plugins/min…

image.png




文件名每次唯一的

image.png




自动拷贝html

image.png




使用 source map

image.png 当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会直接指向到 bundle.js。你可能需要准确地知道错误来自于哪个源文件，所以这种提示这通常不会提供太多帮助。

为了更容易地追踪 error 和 warning，JavaScript 提供了 source maps 功能，可以将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。

image.png

image.png

webpack-dev-server

webpack.docschina.org/guides/deve…
以上配置告知 webpack-dev-server，将 dist 目录下的文件 serve 到 localhost:8080 下。（译注：serve，将资源作为 server 的可访问文件）

image.png




模块热替换 ( 热替代 )

模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新。本页面重点介绍其实现，而 概念 页面提供了更多关于它的工作原理以及为什么它有用的细节。

启用HMR

此功能可以很大程度提高生产效率。我们要做的就是更新 webpack-dev-server 配置， 然后使用 webpack 内置的 HMR 插件。我们还要删除掉 print.js 的入口起点， 因为现在已经在 index.js 模块中引用了它。

从 webpack-dev-server v4.0.0 开始，热模块替换是默认开启的。

image.png

image.png


模块懒加载 ( 代码分离 )

代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。

常用的代码分离方法有动态导入：通过模块的内联函数调用来分离代码。

image.png

image.png


Tree shaking

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来的。

image.png




Babel

把es6转换成es5

image.png

在开发中我们经常使用ES6+，typescript等语法，但是在打包后，这些代码浏览器不能识别，所以此时我们使用babel来解决该问题。
babel定义：babel是一个工具链主要用于将ES6+语法兼容老版本的浏览器。

从上面的例子来看，我们在运行babel代码时，不能将箭头函数转换为普通含函数。原因是需要安装一些插件。
1、@babel/plugin-transform-arrow-functions
2、@babel/plugin-transform-block-scoping

npm install babel-loader @babel/core @babel/plugin-transform-arrow-functions @babel/plugin-transform-block-scoping -D

image.png

这样做比较麻烦，所以，我们还可以这样做

image.png

image.png




如何提高webpack的构建速度

1. 关闭sourcemap
(1) 因为关闭了，打包的时候就少生成一些map文件，性能肯定速度变快
2. 缩小loader查找范围
image.png 缩小编译的范围

image.png

3. 优化 resolve.alias

image.png

4. 使用happyPack
Happypack 将 loader 由单进程转为多进程 webpack 的缺点是单线程的，我们可以使用 Happypack 把任务分解给多个子进程去并发执行，大大提升打包效率;配置的方法是把 loader 的配置转移到 HappyPack 中去;

image.png

image.png

5. 移除console.log: 通过babel的插件进行移除(babel-plugin-transform-remove-console)

6. 提取公用库
DllPlugin 提取公用库 开发过程中，我们经常需要引入大量第三方库，这些库并不需要随时修改或调试，我们可以使用DllPlugin和DllReferencePlugin单独构建它们,配置webpack.dll.config.js www.cnblogs.com/sexintercou…
element ui ,vue ,echarts 每次打包都要把这些打包没有任何必须，因为这些东西是第三方，永远不会变，其实每次打包变是我们自己在src中写的代码 dllPlugins可以实现把这些第三方直接单独打包好之后缓存起来，以后打包只需要打包自己的东西就可以了
7. 对图片进行压缩 image-webpack-loader

image.png

avatar
文章
阅读
粉丝