【webpack4x】核心概念

目录

一、什么是loader

二、使用 Loader 打包静态资源（图片篇）

三、使用 Loader 打包静态资源（样式篇）

四、 使用plugins让打包更便捷

五、Entry与Ouput的基本配置

六、SourceMap的配置

七、 使用webpackDevServer 提升开发效率

八、 Hot Module Replacement热更新模块

九、使用babel处理es6代码

十、 配置React代码的打包

?

一、什么是loader

默认能处理自带的js

二、使用 Loader 打包静态资源（图片篇）

1 file-loader

1.1场景1：例如有个图片是怎么打包的

file-loader会把这个文件移动到dist目录下，并且给它改个名，console.log(avatar)输出其实就是改名后的文件名

思考题： file-loader都能处理哪些文件后缀？

1.2 再谈file-loader去了解options属性

使用options可以使得改名使用的名字和原来一致（注意外层要加‘’）

1.3 同样拓展，可以给名字改成自己需要的，例如加上hash，如下：

1.4 继续拓展，更多图片格式

1.5 继续拓展，

打包dist根目录下的某个文件夹下

2 url-loader

它也能打包图片，url-loader是会把图片转换成一个base64，然后放到打包输出文件中。
但是不一定合理，如果图片非常非常小，打包成base64可以，要是很大，就不合理了，打包时间太长

上述配置是，当图片不超过2048的时候，使用url-loader，转换成base64导入到js文件中
测试样例超过20kb，如file-loader一模一 样

本节学完后： 对file-loader和url-loader看文档了解更多

三、使用 Loader 打包静态资源（样式篇）

1. css文件如何打包呢？

要使用两个loader，因此要改成一个数组
css-loader会分析各个css文件之中的关系，比如index.css 引入了main.css文件，最终把这些合并成一个css
style-loader会把打包后的css挂载到页面上

2. 如果写sass、scss等新潮文件，怎么打包？

还需要一个sass-loader

需要注意装sass-loader还需要装一个node-sass包

还需要注意： loader有执行顺序的，从下到上，从右到左，上述会先执行sass-loader。

3. 如何给css添加上各个浏览器的兼容

postcss-loader可以处理
3.1 首先安装 npm install .......
3.2 需要设置一个postcss.config.js配置文件
3.3 再配置

3.4 npm isntall autoprefixer -D

4. 一个问题，如果遇到一种情况，在index.scss中引入了一个main.scss

常规情况下执行是，首先打包index.scss会依次从下往上执行loader，然后碰到index.scss中引入的语句，引入对应的scss文件，但不会又从下往上执行loader，可能造成引入的scss就没有sass解析过

解决办法

也就是在css-loader中配置，当遇到引入scss会重新执行之前的2个loader

5 模块化css如何做到，只在某个文件中有用，而不是全局引入

模块化打包

这样就不会导致引入全局样式而与其他冲突

6. 如果要让文字使用上字体

从阿里图标库下载了对应文件
然后

去除上个例子中的模块化css配置属性

然后遇到报错

字体文件例如.eot怎么打包，依然是使用file-loader

看完本节后：Asset Management文档开始看、对样式的loaders中的sass-loader css-loader style-loader postsass-loader查看文档，加强掌握

四、 使用plugins让打包更便捷

1. 在此之前，我们每次都要在dist目录下，自己创建一个index.html，然后引入打包后的js文件

html-webpack-plugin

但是上述配置后，index.html中没有对应的入口，只是引入了打包后的js文件

继续优化

这样就会基于index.html这个模板在dist下面生成一个index.html进行引入打包后的js文件

2. 那么plugin的作用是什么

类似于vue react的生命周期函数

3. 我们希望每次打包后，删除上次打包生成的文件

npm install clean-webpack-plugin -D

就会在打包之前，清理dist下的所有文件

五、Entry与Ouput的基本配置

1 . entry可以是一个字符串

相当于是

如果在output中没有改名的话，打包生成的默认名字是main.js ，当然还可以配置多入口，继续阅读下面

2. 如果我想打包2次生成两个文件

遇到打包错误，由于两次生成的都是叫做bundle.js
解决办法

name第一次对应main 第二次对应sub

3. 如果我们把js放到cdn上，那么js也要请求对应地址上的js，输出的文件名称可以加上前缀

本节阅读完后：对着entry、output文档过一遍，不需要全看懂
重点在GUIDES目录下的

要一行一行看过去

html-webpack-plugin的配置项都看一遍，在github上看会更加详细

六、SourceMap的配置

1. 什么是SourceMap

development模式下，sourceMap已经自动打开，先关掉打包试试

就是我们如果写的代码有错误，比如console拼写成sonssle，我们查看报错，会定位到打包后的文件，但我们通常希望能够定位到源代码的目录某行错误，而不是打包后的文件哪行错误

我们就可以通过SourceMap来做这样一件事情，概括如下
我们可以这么配置：

这个时候就能跳转到源代码错误位置

当然，所带来的是打包速度降低

原理是会在dist打包目录下添加一个

• inline-source-map模式下，报错索引没问题，只是上述main.js.map文件就会写在main.js中，以base64的形式存在
• cheap-inline-source-map模式下，和上述差不多，只是会告诉我哪一行报错，而不会像上面一样告诉我哪行哪列出错，减少性能代价问题
• cheap-module-source-map 就是还会管第三方模块里面的错误
• eval 打包速度最快的，每一map文件，也没有base64，而是以eval形式提示
  

然后以sourceURL指向错误，存在缺陷是，复杂情况下，可能报错不全面

开发比较好的方案是：

线上的方案是：

额外说明

• inline- base64 放到打包中
• cheap 提示哪行出错 业务代码
• module还负责 第三方模块代码
• eval 提升速度 以eval形式

通用方式

source-map

七、 使用webpackDevServer 提升开发效率

1.基本使用

上述能自动监听到打包的代码出现了变动，但是不会起一个服务器，不能发请求，和自动刷新浏览器

继续优化 ，代码变动能自动打包自动刷新

2.起一个服务器，contentBase目录是在dist上启动 open指的是启动服务器的时候自动打开浏览器，访问8080

开启一个服务器，可以发起异步请求
继续优化，使得可以跨域，

本节学完以后：devServer的文档，可以在遇到问题的时候去查看解决方案

3. 不借助webpackDevServer自己写一个简单服务器，当监听到src下文件有变动时，自动更新

使用express

webpack(config)能生成一个webpack编译器
然后使用了express中间件，传入编译器，路径下发生变动时，重新编译

4. 命令行 webpack语法

5.node webpack语法

本节学完以后：全看完

八、 Hot Module Replacement热更新模块

1. 为何webpack-dev-server打包没有dist目录

因为打包会放到内存当中，提升打包速度

2. 如何去实现每次代码变动的时候，不请求一次页面文档重新刷新，只进行页面更改更新

重启下命令，避免缓存配置不生效

3.一个页面，引入了两个JS模块

一个模块的代码变化后，页面没有进行热更新，需要进行一些小的操作

4. 为什么引入css，不需要进行上面这样操作？

因为css-loader底层已经帮我们实现了上述的操作。
额外例如vue借助的是vue-loader、react借助的是babel-preset对应的loader都帮我们实现了对应的操作
本质上我们都需要这样写一些这样的代码。

本节学完以后：读文档

九、使用babel处理es6代码

1. 怎么使用babel ?

1.1 首先需要安装babel-loader 和 @babel/core

其次配置文件webpack

1.2 还需要安装

1.3 为何需要？

当我们使用babel-loader去处理js的时候，实际上babel只是和webpack做通信的桥梁，但是babel-loader并不会帮你把es6语法给转换。
继续配置

1.4 仍然需要进一步改进，为什么呢？

因为目前只转码了一部分，例如转码后的一些语法，如arr.map仍然在低版本浏览器中是不存在的。
需要一个polyfill进行补充

然后import 放到业务代码最顶部

1.5 但是 存在一个大问题：

没有用polyfill的代码大小

现在使用后

继续进行优化包大小：

presets中的参数的第一个参数是名称，第二个是额外参数是个对象。
useBuiltIns: ‘usage‘ 表示只对写的一些业务代码进行兼容处理

babel是如何转vue react的一些语法的？？？可以进一步学习！

2.上述代码，写业务场景还能使用，但是开发组件库，内裤，第三方模块的时候，使用polyfill这种方案是有问题的是，因为是全局引入的会污染环境。另外一种babel方案如下：

安装完毕后，再配置webpack

请确保已经装了对应

3. babel实则配置起来特别长，内容特别多

可以单独一个文件，然后把对应配置项提取出来，例如上面这个

需要注意，不能有注释

总结： babel的两种配置方案，使用场景不同

十、 配置React代码的打包

如何使用webpack + babel打包react代码

安装完后进行配置

执行顺序是从下往上，先执行preset-react再执行preset-env

【webpack4x】核心概念

原文：https://www.cnblogs.com/fe-linjin/p/11298956.html