spicyboiledfish的博客

对于庞大的项目而言，webpack打包会存在node内存溢出的问题。解决方案如下：webpack4:原先的："build": "webpack --mode production --config ./config/webpack.config.prod.js",更改后的："build": "node --max-old-space-size=8192 node_modules/webpack/bin/webpack.js --mode production --config ./

实际的入口文件是：node_modules/webpack/bin/webpack.js打开这个webpack.js分析源码：根据源码分析：大致的过程如下：1. process.exitCode = 0; 正常执行返回2. 运行命令3. 判断依赖包是否已经安装上4. 判断cli和common是否其中一个已经安装上5. 如果两个都安装了。警告需要去除一...

初级分析：使用webpack内置的statsstats: 构建的统计信息package.json中使用stats:"scripts": { "build: stats":"webpack --env production --json > stats.json" }stats，颗粒度太粗，看不出问题所在。速度分析：使用speed-measure-webpack...

冒烟测试（smoke testing）:冒烟测试是指对提交测试的软件在进行详细深入的测试之前而进行的预测试，这种预测试的主要目的是暴露导致软件需要重新的基本功能失效等严重问题。单元测试的工具：mochaUse // eslint-disable-next-line to ignore the next line.Use /* eslint-disable */ to...

优化构建命令：统计信息stats采用errors-only，只在发生错误时输出。这样就免了在控制台打印的很多的信息。可是实际操作的时候发现。errors-only在npm run build时，信息很少，没有打包成功的明显的命令。故此引入新的插件。npm i friendly-errors-webpack-plugin -D可以很明显的打印出来成功、警告和失败...

总结，SSR（server render） 服务端渲染的核心就是减少请求1. 减少白屏时间2. 对SEO友好SSR的代码实现思路：1. 服务端：使用react-dom/server的renderToString方法将React组件渲染成字符串 服务端路由返回对应的模板2. 客户端打包出针对服务端的组件webpack ssr打包时...

移动端css px自动转换成rem:px2rem-loader:{ loader: 'px2rem-loader', options: { remUnit: 75, // 1个rem是多少px, 一般以750设计稿，vw/10是75 remPrecision: 8 // rem计算保留8个小数点 } }静态资源内联：css内联：方法一：借助s...

path: path.resolve(__dirname, 'dist')console.log(__dirname);打印出来是：/Users/wangrui/Desktop/wpDemos意思是：在当前根目录上创建一个dist文件夹，并且将打包出来的文件放进去运行脚本：./node_modules/.bin/webpack 在本地安装后可以执行这个命令进行打包...

先贴出报错：npm登录的时候，报错409.原因：镜像源切到了淘宝源，需要将淘宝源切回到npm.解决方法：nrm use npm.或者：npm login --registry http://registry.npmjs.orgnpm publish --registry http://registry.npmjs.org...

先贴出报错：注意：我的mocha单元测试均通过，但是istanbul的测试覆盖率却无法生效。本地的test命令如下："scripts": { "test": "istanbul cover ./node_modules/.bin/_mocha", },安装的istanbul的版本是：v0.4.5, 官方安装的。解决方法：重新安装istanbul，...

browsers已经不再使用，采用overrideBrowserslist.或者使用browserslist key in package.json or ,browserslistrc file.

// webpack版本：4.32.2 // 抛错原写法const CleanWebpackPlugin = require("clean-webpack-plugin"); ... plugins: [ new CleanWebpackPlugin(['dist'])] ... // 另一种错误写法 const CleanWebpackPlugin = ...

JS启用babel转码：虽然现代的浏览器已经兼容了96%以上的ES6的语法了，但是为了兼容老式的浏览器（IE8、9）我们需要把最新的ES6的语法转成ES5的。那么babel的loader就出场了。npm i -D babel-loader babel-core babel-preset-envbabel-core：封装了babel编译时需要使用的APIbabel-loader：...

加载图片与图片优化：如果不加对图片处理的loader, 就会报错：vscode中竖排选中如何选中？command+option+ ∨ （向下箭头），则可以按纵向选中项。shift+ >（向左箭头），则可以按横向选中项。file-loader: 处理文件的导入module: { rules: [ { te...

先贴出报错：这里我使用了css的contenthash, 以及js的chunkhash, 这个跟hotModuleReplacementPlugin有冲突导致的。mode已经改成了development仍然报错。解决方案：将new webpack.HotModuleReplacementPlugin()这一段注释掉，就ok了。plugins: [ new M...

首先贴报错：webpack配置如下：module.exports = { entry: { app: './src/index.js', search: './src/search.js' }, output: { path: path.resolve(__dirname, 'dist'), fi...

首先贴出目前手淘用的lib-flexible库源码：(function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontS...

先贴出报错：我用的webpack版本是：v4.36.1根据字面意思，style-loader中不存在上述的options选项。找到node_modules里面的style-loadr源码查看：const insert = typeof options.insert === 'undefined' ? '"head"' : typeof options.insert === ...

先贴出报错：字面意思是：babel警告，代码生成器已经将这块js去除了styling, 因为他超过了500KB.解决方案：{ test: /.js$/, exclude: /node_modules/, use: 'babel-loader'},...

mini-css-extract-plugin这个plugin将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMaps的按需加载。我本地配置了这个plugin, 但是打包却依然没有css, 且打包并没有报错，很奇怪。原因已经找到：由于同时配置了这两个plugin, 导致冲突。html-inline-css-webpack-p...

先贴出报错：我本地的weback4 配置了eslint, 打包的时候没有报eslint报错，且打包成功。但是打包出来的html文件浏览器打开是空白。控制台打开报错是Uncaught RefrenceError: Invalid left-hand side in assignment. 大致的意思是表达式左边不合法，根据经验应该是某个等于号有问题。首先：打开source-map排错，web...

npm init -y 初始化package.json; -y是代表yes,跳过提问阶段webpack 4.x版本之后，需要再额外安装一个webpack-cli--save => -S 保存至dependencies-dev --save => -D 保存至devDependenciesoutput: { filename: 'main.js', ...