
Webpack
文章平均质量分 55
spicyboiledfish
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory打包报错解决
对于庞大的项目而言,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 ./原创 2020-06-02 17:47:17 · 582 阅读 · 0 评论 -
webpack系列笔记(10)webpack启动过程分析
实际的入口文件是:node_modules/webpack/bin/webpack.js打开这个webpack.js分析源码:根据源码分析:大致的过程如下:1. process.exitCode = 0; 正常执行返回2. 运行命令3. 判断依赖包是否已经安装上4. 判断cli和common是否其中一个已经安装上5. 如果两个都安装了。警告需要去除一...原创 2019-10-14 15:35:04 · 404 阅读 · 0 评论 -
webpack系列笔记(9)webpack构建速度和体积优化策略
初级分析:使用webpack内置的statsstats: 构建的统计信息package.json中使用stats:"scripts": { "build: stats":"webpack --env production --json > stats.json" }stats,颗粒度太粗,看不出问题所在。速度分析:使用speed-measure-webpack...原创 2019-10-14 15:29:28 · 722 阅读 · 0 评论 -
webpack系列笔记(8)冒烟、单元测试和测试覆盖率
冒烟测试(smoke testing):冒烟测试是指对提交测试的软件在进行详细深入的测试之前而进行的预测试,这种预测试的主要目的是暴露导致软件需要重新的基本功能失效等严重问题。单元测试的工具:mochaUse // eslint-disable-next-line to ignore the next line.Use /* eslint-disable */ to...原创 2019-10-14 15:16:29 · 773 阅读 · 0 评论 -
webpack系列笔记(7)优化构建命令行
优化构建命令:统计信息stats采用errors-only,只在发生错误时输出。这样就免了在控制台打印的很多的信息。可是实际操作的时候发现。errors-only在npm run build时,信息很少,没有打包成功的明显的命令。故此引入新的插件。npm i friendly-errors-webpack-plugin -D可以很明显的打印出来成功、警告和失败...原创 2019-10-14 15:10:45 · 442 阅读 · 0 评论 -
webpack系列笔记(6)实现SSR打包
总结,SSR(server render) 服务端渲染的核心就是减少请求1. 减少白屏时间2. 对SEO友好SSR的代码实现思路:1. 服务端:使用react-dom/server的renderToString方法将React组件渲染成字符串 服务端路由返回对应的模板2. 客户端打包出针对服务端的组件webpack ssr打包时...原创 2019-10-14 15:08:43 · 771 阅读 · 0 评论 -
webpack系列笔记(5)性能优化
移动端css px自动转换成rem:px2rem-loader:{ loader: 'px2rem-loader', options: { remUnit: 75, // 1个rem是多少px, 一般以750设计稿,vw/10是75 remPrecision: 8 // rem计算保留8个小数点 } }静态资源内联:css内联:方法一:借助s...原创 2019-10-14 15:07:14 · 524 阅读 · 0 评论 -
webpack系列笔记(4)hash
path: path.resolve(__dirname, 'dist')console.log(__dirname);打印出来是:/Users/wangrui/Desktop/wpDemos意思是:在当前根目录上创建一个dist文件夹,并且将打包出来的文件放进去运行脚本:./node_modules/.bin/webpack 在本地安装后可以执行这个命令进行打包...原创 2019-10-14 15:03:28 · 354 阅读 · 0 评论 -
报错:Registry returned 409 for PUT on http://registry.npm.taobao.org/ -/user/org.couchdb.user
先贴出报错:npm登录的时候,报错409.原因:镜像源切到了淘宝源,需要将淘宝源切回到npm.解决方法:nrm use npm.或者:npm login --registry http://registry.npmjs.orgnpm publish --registry http://registry.npmjs.org...原创 2019-09-01 19:51:45 · 2986 阅读 · 0 评论 -
报错:No coverage information was collected, exit without writing coverage information
先贴出报错:注意:我的mocha单元测试均通过,但是istanbul的测试覆盖率却无法生效。本地的test命令如下:"scripts": { "test": "istanbul cover ./node_modules/.bin/_mocha", },安装的istanbul的版本是:v0.4.5, 官方安装的。解决方法:重新安装istanbul,...原创 2019-09-01 15:18:27 · 1035 阅读 · 0 评论 -
报错Replace Autoprefixer browsers option to Browserslist config.
browsers已经不再使用,采用overrideBrowserslist.或者使用browserslist key in package.json or ,browserslistrc file.原创 2019-08-15 20:53:25 · 7098 阅读 · 1 评论 -
报错:TypeError: CleanWebpackPlugin is not a constructor
// webpack版本:4.32.2 // 抛错原写法const CleanWebpackPlugin = require("clean-webpack-plugin"); ... plugins: [ new CleanWebpackPlugin(['dist'])] ... // 另一种错误写法 const CleanWebpackPlugin = ...原创 2019-08-15 20:26:27 · 660 阅读 · 0 评论 -
webpack 4系列笔记(3)babel
JS启用babel转码:虽然现代的浏览器已经兼容了96%以上的ES6的语法了,但是为了兼容老式的浏览器(IE8、9)我们需要把最新的ES6的语法转成ES5的。那么babel的loader就出场了。npm i -D babel-loader babel-core babel-preset-envbabel-core:封装了babel编译时需要使用的APIbabel-loader:...原创 2019-07-19 15:53:30 · 281 阅读 · 0 评论 -
webpack 4系列笔记(2)基本配置
加载图片与图片优化:如果不加对图片处理的loader, 就会报错:vscode中竖排选中如何选中?command+option+ ∨ (向下箭头),则可以按纵向选中项。shift+ >(向左箭头),则可以按横向选中项。file-loader: 处理文件的导入module: { rules: [ { te...原创 2019-07-19 15:57:36 · 196 阅读 · 0 评论 -
报错Cannot use [chunkhash] or [contenthash] for chunk in '[name][chunkhash:8].js' (use [hash] instead)
先贴出报错:这里我使用了css的contenthash, 以及js的chunkhash, 这个跟hotModuleReplacementPlugin有冲突导致的。mode已经改成了development仍然报错。解决方案:将new webpack.HotModuleReplacementPlugin()这一段注释掉,就ok了。plugins: [ new M...原创 2019-08-13 16:37:39 · 9941 阅读 · 1 评论 -
报错Error: options/query provided without loader (use loader + options) in {
首先贴报错:webpack配置如下:module.exports = { entry: { app: './src/index.js', search: './src/search.js' }, output: { path: path.resolve(__dirname, 'dist'), fi...原创 2019-08-13 17:18:49 · 2238 阅读 · 0 评论 -
移动端适配原理解析以及rem如何换算px
首先贴出目前手淘用的lib-flexible库源码:(function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontS...原创 2019-08-19 15:16:26 · 713 阅读 · 0 评论 -
报错Invalid options object. Style Loader has been initialised using an options object that does not .
先贴出报错:我用的webpack版本是:v4.36.1根据字面意思,style-loader中不存在上述的options选项。找到node_modules里面的style-loadr源码查看:const insert = typeof options.insert === 'undefined' ? '"head"' : typeof options.insert === ...原创 2019-08-19 18:02:10 · 4981 阅读 · 7 评论 -
报错The code generator has deoptimised the styling of ...as it exceeds the max of 500KB.
先贴出报错:字面意思是:babel警告,代码生成器已经将这块js去除了styling, 因为他超过了500KB.解决方案:{ test: /.js$/, exclude: /node_modules/, use: 'babel-loader'},...原创 2019-08-20 13:59:08 · 34300 阅读 · 8 评论 -
webpack4已经配置了mini-css-extract-plugin, 但是却打包生成不了css文件。解决
mini-css-extract-plugin这个plugin将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMaps的按需加载。我本地配置了这个plugin, 但是打包却依然没有css, 且打包并没有报错,很奇怪。原因已经找到:由于同时配置了这两个plugin, 导致冲突。html-inline-css-webpack-p...原创 2019-08-20 15:31:01 · 8511 阅读 · 0 评论 -
报错:Invalid left-hand side in assignment 解决
先贴出报错:我本地的weback4 配置了eslint, 打包的时候没有报eslint报错,且打包成功。但是打包出来的html文件浏览器打开是空白。控制台打开报错是Uncaught RefrenceError: Invalid left-hand side in assignment. 大致的意思是表达式左边不合法,根据经验应该是某个等于号有问题。首先:打开source-map排错,web...原创 2019-08-25 09:59:08 · 6592 阅读 · 0 评论 -
webpack 4系列笔记(1)loader
npm init -y 初始化package.json; -y是代表yes,跳过提问阶段webpack 4.x版本之后,需要再额外安装一个webpack-cli--save => -S 保存至dependencies-dev --save => -D 保存至devDependenciesoutput: { filename: 'main.js', ...原创 2019-07-10 16:10:50 · 388 阅读 · 0 评论