读书笔记之webpack实战

1.commonjs只会对require的代码执行一次 之后的require只会直接取其导出值
2.es6 Module动态映射,CommonJs是值拷贝，前者可以支持一定程度的循环依赖，需要由开发保证导入时，已经设置好正确的导出值
3.通过单独加载包内的单独文件，从而减小打包体积
4.当第三方依赖较多时，我们可以用提取vendor的方法将这些模块打包到一个单独的bundle中，以更有效地利用客户端缓存，加快页面渲染速度。
5.webpack指定生成目录：
webpack.config.js:配置output的path
6.与loader相关的配置都在module对象中，其中module.rules代表了模块的处理规则
7.两个一般一起使用：
css-loader:处理css的加载语法
style-loader:将css插入页面
8.在Webpack中，我们认为被加载模块是resource，而加载者是issuer，可以配置哪个js可以加载css
rules: [
{
test: /.cssKaTeX parse error: Can't use function '\.' in math mode at position 119: … test: /\̲.̲js/,
include: /src/pages/,
},
}
],
9.enforce可以强制指定loader的执行顺序，分四种：
normal:直接定义的默认
pre：代表它将在所有正常loader之前执行
post：和pre相反，代表它需要在所有loader之后执行
inline ：webpack不推荐使用

10.·babel-loader：它是使Babel与Webpack协同工作的模块。
·@babel/core：顾名思义，它是Babel编译器的核心模块。
·@babel/preset-env：它是Babel官方推荐的预置器，可根据用户设置的目标环境自动添加所需的插件和补丁来编译ES6+代码。
11…ts-loader:
用于连接Webpack与Typescript的模块
安装：npm install ts-loader typescript
二者结合可以进行代码检查
webpack配置：
rules: [
{
test: /.tsKaTeX parse error: Expected 'EOF', got '}' at position 34: …s-loader', }̲ ], 本身配置：应放在工程目…/,
use: ‘file-loader’,
}
],
16.output.path是资源的打包输出路径，output.publicPath是资源引用路径
17.vue-loader可以将组件的模板、JS及样式进行拆分。在安装时，除了必要的vue与vue-loader以外，还要安装vue-template-compiler来编译Vue模板，以及css-loader来处理样式（如果使用SCSS或LESS则仍需要对应的loader）。
18.loader就像Webpack的翻译官。Webpack本身只能接受JavaScript，为了使其能够处理其他类型的资源，必须使用loader将资源转译为Webpack能够理解的形式
19.在配置loader时，实际上定义的是模块规则（module.rules），它主要关注两件事：该规则对哪些模块生效（test、exclude、include配置），使用哪些loader（use配置）。loader可以是链式的，并且每一个都允许拥有自己的配置项。
20.loader本质上是一个函数。第一个loader的输入是源文件，之后所有loader的输入是上一个loader的输出，最后一个loader则直接输出给Webpack。
21.plugins用于接收一个插件数组，我们可以使用Webpack内部提供的一些插件，也可以加载外部插件。
22.chunk是对一组有依赖关系的模块的封装
23.souremap:true 查看源码(js和css都有配置，css通过loader的options)
24.第五章：通过SCSS、Less等预编译样式语言来提升开发效率，降低代码复杂度。通过PostCSS包含的很多功能强大的插件，可以让我们使用更新的CSS特性，保证更好的浏览器兼容性。通过CSS Modules可以让CSS模块化，避免样式冲突
25.CommonsChunkPlugin的默认规则是只要一个模块被两个入口chunk所使用就会被提取出来；
minChunks可以接受一个数字，当设置minChunks为n时，只有该模块被n个入口同时引用才会进行提取；
指定minChunks为Infinity，为了生成一个没有任何模块而仅仅包含Webpack初始化环境的文件，这个文件我们通常称为manifest。