Webpack
麦子的小库存
这个作者很懒,什么都没留下…
展开
-
webpack小笔记
一、babel主要用于将ES5 + 的语法转换为向后兼容的JS语法,以便能够运行在浏览器或者其他环境中。1、babel转换JSX语法,即React: @babel/preset-react2、babel转换ES5 + 语法:@babel/preset-env3、@babel/polyfill:就是用 es5 实现了 es6 的所有 API 和新的数据结构二、row-loader:将文件作为字符串导入三、使用第三方类库:1、直接引入:(缺点:会把lodash打包到bundle中去,且在原创 2022-01-07 18:04:47 · 726 阅读 · 0 评论 -
postcss-loader和importLoaders
css文件中如果有@import 语句,importLoaders的作用是决定@import模块在使用css-loader前,要使用几个其它的loaders处理。postcss-loader解决css兼容性问题{ test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1, /* 在这之前还需加载几个loader *原创 2021-12-03 11:44:55 · 234 阅读 · 0 评论 -
理解Babel
本文参考链接:https://mp.weixin.qq.com/s/C-WmM5tjfc3r4sB52C4R0Q一、用途:Babel能够转译ES5+的代码,使它在浏览器里面能运行二、抽象语法树:AST(节点上有type属性,还有若干描述信息对属性)三、Babel工作过程: 1、Parse(解析):将源代码转换成更加抽象的表示方法(AST) (1)词法分析:对代码进行“分词”,变成一个Tokens数组 ...转载 2020-05-17 14:17:43 · 161 阅读 · 0 评论 -
webpack小知识点
一、webpack工作流程:初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数; 开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译; 确定入口:根据配置中的 entry 找出所有的入口文件; 编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步...转载 2020-05-05 14:46:51 · 281 阅读 · 0 评论 -
webpack学习---解析项目中使用的webpac配置
一、文件目录:二、webpack.config.js// 随着项目需求的增长,我们必须要找到更有效地管理配置文件的方法。// 分离配置文件:// webpack.base.config.js 公共环境的配置文件// webpack.dev.config.js 开发环境下的配置文件// webpack.prod.config.js 生产环境下的配置文件const merge...原创 2020-01-19 15:58:52 · 488 阅读 · 0 评论 -
Webpack学习(三)
一、Tree Shaking 概念详解二、Webpack和Code Splittingmodule.exports = { plugins: [new HtmlWebpackPlugin( template: 'src/index.html' ),new CleanWebpackPlugin(['dist'],{ root: path.resolve(__dir...原创 2019-06-13 10:34:32 · 80 阅读 · 0 评论 -
webpack学习(一)
一、使用Webpack的配置文件文件webpack.config.js:const path = require('path');module.exports = { entry: './index.js', //要打包的文件 output: { filename: 'bundle.js', //打包后文件的名字 //__dirname指的是当前文件webpack.c...原创 2019-06-11 17:48:28 · 100 阅读 · 0 评论 -
webpack学习(二)
一、SourceMap的配置:const path = require('path');module.exports = { mode: 'production', devtool: 'inline-source-map', //可以将打包后运行的错误映射到打包之前的文件位置中 // development devtool: 'cheap-module-eval-sourc...原创 2019-06-11 20:43:02 · 80 阅读 · 0 评论