读书笔记之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。