读书笔记之webpack实战

2022-09-29 08:08:58 浏览数 (1)

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。

0 人点赞