随笔分类 - webpack
摘要：目录 前端为什么要进行打包和构建？ module chunk bundle区别 loader和plugin的区别 babel和webpack的区别 webpack如何实现懒加载 如何产出一个lib babel-polyfill babel-runtime区别 为什么proxy不能被polyfill
阅读全文
摘要：module chunk bundle的区别 module 各个源码文件，webpack一切皆模块 chunk 多模块合并成的， 如entry import()异步加载 splitChunk代码分割 bundle 最终的输出文件，有可能好多个打包文件 1.优化babel-loader 尽可能少的应用
阅读全文
摘要：最近新启动了个pc端的项目，项目要求兼容IE，想必各位前端都清楚，要想拿下IE这个破地，必须用上babel。 个人平时对这方面也没有过分的关注，于是乎各种网上寻找解决方案，这一找，发现有时候网络就跟个历史博物馆一样，大部分问题的解决方案基本都是过时了的。通篇看下来，基本全是推荐使用babel-pol
阅读全文
摘要：关于开启多进程 1.项目较大，打包较慢，开启多进程能提高速度 2.项目较少，打包很快，开启多进程会降低速度（进程开销） happyPack多进程打包js单线程，开启多进程打包，提高构建打包速度 在生产环境配置，开发环境配置也可以, 安装happyPack webpack.config.js cons
阅读全文
摘要：为什么要使用Dll 通常来说，我们的代码都可以至少简单区分成业务代码和第三方库。如果不做处理，每次构建时都需要把所有的代码重新构建一次，耗费大量的时间。然后大部分情况下，很多第三方库的代码并不会发生变更（除非是版本升级），这时就可以用到dll：把复用性较高的第三方模块打包到动态链接库中，在不升级这些
阅读全文
摘要：weppack.config.js配置，该文件在根目录下的build文件夹里头 module.exports = { entry: { main: './src/index.js', }, resolve: { extensions: ['.js', '.jsx'，'.vue','.ts'], al
阅读全文
摘要：ESLint（https://eslint.bootcss.com/） 能对 JS 基本语法错误/隐患进行提前检查，使用步骤 安装loader npm install eslint-loader eslint --save-dev eslint 是语法检查的包 eslint-loader 是 esl
阅读全文
摘要：解决方法： 1.由后台解决，后台在服务端添加配置，检测到404页面，直接跳转指向到 index.html 的 路径 2.由前端解决，不采用 mode:"history" 模式，采用 hash 路径；就可以解决404的问题 虽然这样会显得 url 很丑 用vue-cli脚手架搭建单页面项目 route
阅读全文
摘要：目前比较主流的框架如Vue、React等，都是单页面应用的框架。一般我们在使用它们的时候，会使用官方脚手架来创建项目，所以我们不必关心单页面应用路由是如何实现的，因为脚手架中已经帮我们做好了配置。在具体项目开发中，我们只需要做相应的路由配置即可。 那么在实际项目中，手动搭建项目的前提下，我们需要如何
阅读全文
摘要：当我们工作本地开发某一个需求的时候，需要将这块需求的请求地址转发到某个后端同事的本地服务器或某个服务器上，就需要用到代理。然后其他页面的请求都走测试环境的请求。那么我们该怎样拦截某个请求，并将其转发到我们想要转发的接口上呢？ 这个时候就需要用到 webpack-dev-server 主要看 devS
阅读全文
摘要：当我们工作本地开发某一个需求的时候，需要将这块需求的请求地址转发到某个后端同事的本地服务器或某个服务器上，就需要用到代理。然后其他页面的请求都走测试环境的请求。那么我们该怎样拦截某个请求，并将其转发到我们想要转发的接口上呢？只有开发环境需要代理， 这个时候就需要用到 webpack-dev-serv
阅读全文
摘要：使用webpack打包ts文件，就需要安装 ts-loader 安装： npm i ts-loader typescript -D webpack.config.js 文件中添加解析 typescript 代码的 loader const HtmlWebpackPlugin = require('h
阅读全文
摘要：http-server 安装 workbox-webpack-plugin 安装 相信很多朋友都有耳闻过 PWA 这门技术, PWA 是 Progressive Web App 的英文缩写， 翻译过来就是渐进式增强WEB应用， 是Google 在2016年提出的概念，2017年落地的web技术。目的
阅读全文
摘要：webapck配置目录 开发环境webpack.dev.js const webpack = require('webpack'); const devConfig = { mode: 'development', devtool: 'cheap-module-eval-source-map', d
阅读全文
摘要：以 jquery 为例，代码如下 // index.js import $ from 'jquery' $('body').html('HHAHAH') import func from './test.js' func() // test.js export default function fu
阅读全文
摘要：缓存 场景 生产环境中，我们配置output,输出打包配置,代码分割配置，第三方的库会被打包到vendors文件 optimization: { usedExports: true, splitChunks: { chunks: 'all', cacheGroups: { vendors: { te
阅读全文
摘要：我们之前写的css文件都会被打包进js文件中，要想把css单独打包成一个css文件该怎么做呢？ 这个时候就需要用到 MiniCssExtractPlugin 开发环境用不到这个功能（因为这个东西不支持热模块更新，样式更改自动替换，不用刷新页面），一般都是用在生产环境中。 安装： npm instal
阅读全文
摘要：它可以直观分析打包出的文件包含哪些，大小占比如何，模块包含关系，依赖项，文件是否重复，压缩后大小如何，针对这些，我们可以进行文件分割等操作。 分析内容：如图所示，打包出的文件包含哪些，大小占比如何，模块包含关系，依赖项，文件是否重复，压缩后大小如何步骤如下：1. 安装：npm install web
阅读全文
摘要：Lazy Loading 异步import的包会被单独打成一个chunk， 新建index.js入口文件，import(),这个是异步加载模块方式， vue的路由路由懒加载就是如此 async function getComponent() { const { default: _ } = awai
阅读全文
摘要：当你把所有的代码都打包到一个文件的时候，每次改一个代码都需要重新打包。且用户都要重新加载下这个js文件。但是如果你把一些公共的代码或第三方库抽离并单独打包。通过缓存加载，会加快页面的加载速度。（分割成多个文件，不必打包成一个文件，提高性能） 异步加载的代码，webpack会单独打包到一个js文件中
阅读全文