随笔分类 - webpack
摘要：babel ES6 转换 ES5 实现原理 babel 各种包介绍 babel-core：核心包，提供转译的 API，用于对代码进行转译。例如 babel.transform。在 webpack 中 babel-loader 就是通过这个包实现。babylon：babel 的词法解析器。将原始代码逐
阅读全文
摘要：1.提高 Webpack 打包速度 （1）优化loader的文件搜索范围 Babel 是编写下一代 JavaScript 的编译器 对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项
阅读全文
摘要：webpack在不进行任何配置的情况下，他只认识js。 为什么要打包？ 因为一个个小文件，我们合成一个，这样请求就只请求一次。 webpack除了打包之外，还具有翻译官的功能？ loader把浏览器看不懂的代码翻译成浏览器看的懂的代码。 Plugin？ 对文件做点别的事情 不管是loader 还是
阅读全文
摘要：1.如何设置process.env.NODE_ENV 2.简述vue-cli中chainWebpack的使用方法 3.多平台打包
阅读全文
摘要：https://www.jianshu.com/p/8dd5885bfb66 Webpack 输出的 bundle.js 是什么样子的吗？ 为什么原来一个个的模块文件被合并成了一个单独的文件？为什么 bundle.js 能直接运行在浏览器中？ bundle.js能直接运行在浏览器中的原因在于输出的文
阅读全文
摘要：第一种：同一个index.html作为模板 https://www.jianshu.com/p/81ed6729afdb 第二种：解决打包后判断移动还是PC环境 devServer中index的默认值 https://blog.csdn.net/weixin_34355715/article/det
阅读全文
摘要：新起了一个项目，用于做打包和发npm包，最后打出来的包肯定为dist，按理说在dist中的index.html本地打开也能看到页面（静态资源文件） 结果本地打开是个白页。 我们先看一下空白页的时候，通过浏览器的网络中看一下静态资源css，js这些的引入路径是什么样子的： 我们发现加载的这个css路径
阅读全文
摘要：Plugin: 开始打包，在某个时刻，帮助我们处理⼀些什么事情的机制 plugin要比loader稍微复杂一些，在webpack的源码中，用plugin的机制还是占有非常大的场景，可以说plugin是webpack的灵魂。 设计模式 事件驱动 发布订阅 plugin是一个类，里面包含一个apply函
阅读全文
摘要：loader就是一个函数，声明式函数，不能用箭头函数 loader是拿到源代码，作进一步的修饰处理，再返回处理后的源码就可以了 编写loader: 在入口文件index.js中： webpack.config.js配置文件： 创建的loader: 查看打包后的结果：原来index.js中的hello
阅读全文
摘要：什么是代码使用率？ 比如一个JS文件有100行代码，加载他的时候里面当前可能只有60行是直接能加载用到的，里面的另外40行比如说是click事件触发后的代码逻辑，显然，如果我们不点击，只是纯属浏览，那么这40行代码就白白加载了，因为用不到啊，所以总体来说这个文件的代码使用率就是60%。 但是呢？如果
阅读全文
摘要：https://github.com/webpack/analyse 在命令行中加上 --profile --json > stats.json 运行npm run bundle，会在根目录生成一个json文件，这个文件中包含了此次打包的所有信息 看这个json文件我们肯定看不懂，我们可以用官方推荐
阅读全文
摘要：我们在入口文件index.js中引入lodash，执行一个方法： 运行发现打的包是2.2MB了，很大，因为这样引入是把lodash全部引入了，体积很大 我们想要的是，像是引入的第三方库我们不想每次打包的时候重新去加载，我们只打包自己的业务逻辑代码，第三方库我们让浏览器缓存，运行的时候直接拿缓存。 1
阅读全文
摘要：一、基于配置文件方式配置 我们想要做的就是打包时候可以开发和生产配置不同的配置文件去打包： webpack.dev.js 和webpack.prod.js 在package.json中配置对应这两种的打包运行命令以及本地便于开发调试的dev-server 接着，我们把原来的webpack.confi
阅读全文
摘要：webpack2.x开始支持 tree shaking概念，顾名思义，"摇树"，只支持ES module的引入方式（ES6）！！！！ 这个方法就是在生产模式下打包出的index.js文件不会把没有使用到的模块给打包进去。从而减少代码体积。 就是会对入口文件index.js 进行检测，没有使用到的就不
阅读全文
摘要：Babel处理ES6 官方网站：https://babeljs.io/ 安装：npm i babel-loader @babel/core @babel/preset-env -D //babel-loader是webpack 与 babel的通信桥梁，不会做把es6转成es5的工作，这部分工作需要
阅读全文
摘要：每次改完代码都需要重新打包一次，打开浏览器，刷新一次，很麻烦 我们可以安装使用webpackdevserver来改善这块的体验 webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了webso
阅读全文
摘要：应用场景：在开发中我们哪里出错了，可以帮助我们快速的定位到哪里出错了。 在webapck.config.js配置文件中，如果mode是development开发模式的话，是默认开启（就是不写devtool），是但定位的错误行数没那么准确。 设置devtool:"source-map"，即可捕获到错误
阅读全文
摘要：plugin 可以在webpack运行到某个阶段的时候，帮你做一些事情，类似于生命周期的概念。 在之前我们使用loader的时候，我们打包后还需要自己手动在打包后的文件夹中创建一个index.html文件，并且这个文件中引入打包后的js，非常麻烦，所以就有了下面这个插件。 一、HtmlWebpack
阅读全文
摘要：安装webpack,推荐使用局部安装，如果全局安装的话，每个项目可能不一定用的是一个webpack的版本 局部安装项目内安装： npm install webpack webpack-cli --save-dev //-D webpack -v //command not found 默认在全局环境
阅读全文
浙公网安备 33010602011771号