Webpack 2-解析node_module的问题 - 腾讯云开发者社区

文章/答案/技术大牛

发布

webpack编译打包出现的问题!

最近使用webpack打包编译文件的时候,遇到个奇怪的问题,找不到源头,具体报错如下: ? 点进去后: ? 为这样的!...看着像moment.js的问题,然而并不是,在其它项目中也有使用到这个插件,也是用的好好的,而且这个错误是突然出现的,之前在使用的时候都是正常的....还有在之前也有出现过一个报错都差不多,叫call() is not a function; 也试过把commont.js加入到其它文件,确实这个页面也报错了,但是这并不是问题的根源,于是继续找: 后来经过排查...:是两个common.js的冲突,从webpack打包的时候,会生成一个common.js的javascript文件,我们自己在测试环境的项目中实际也引用了一个common.js,这样就导致了一些问题,...非常奇葩的问题,引以为戒!

1.5K2 0

关于webpack中无法解析的原因

我的原因是因为在webpack.config.js配置中多引入了一个 //下面这个插件会将页面中的变量解析为正常的html文件,如何要在页面中使用htmlwebpackplugin变量则需要注释这个插件...// loader: "raw-loader" // }, 只需要注释掉这个Loader就可以正常显示htmlwebpackPlugin中变量的值了

7K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

我是如何调试 Webpack 问题的

webpack-dev-server 版本为 3.11.2 看了半天，没问题呀，给了几个纸糊的建议还是解决不了问题，刚好在开会这事就暂且放下了。...第一步：定义问题先复盘一下问题发生的过程： webpack.config.js 同时配置了 ouput.publicPath 与 devServer 运行 npx webpack serve 启动开发服务器...所以问题的核心就是：「为何 Webpack 的 output.publicPath 会影响 webpack-dev-server 的运行效果」？...第二步：回顾背景带着问题我又 review 了一遍 Webpack 官方文档。...第三步：分析问题按照现有的情报，加上我对 HTTP 协议的理解，可以基本推断问题必然是出在 webpack-dev-server 框架处理首页请求的逻辑上，大概率是 output.publicPath

1.8K3 0

webpack5.x 遇到的问题

的导入方式改变了，必须安装 vue-loader@16.0.0-rc.1 版本或更高 2、vue-template-compiler 截止2020-11-17日没有了，新增了 @vue/compiler-sfc...更新问题3 使用webpack5，如下配置出现的问题 "webpack": "^5.4.0", "webpack-cli": "^4.2.0", "webpack-dev-server": "^3.11.0..." 问题：解决方案1：由于webpack-cli版本4，删除了webpack-cli/bin/config-yargs文件，bin目录下没有config-yargs.js，所以安装如下：...webpack serve --mode development --env development" 更新问题4 webpack使用CopyWebpackPlugin插件一直报错，采用的版本是"copy-webpack-plugin...更新问题5 webpack-cli 问题解决方案： optimization: { minimize: true, minimizer: [new TerserPlugin

9551 0

我是如何调试 Webpack 问题的

看了半天，没问题呀，给了几个纸糊的建议还是解决不了问题，刚好在开会这事就暂且放下了。...第一步：定义问题先复盘一下问题发生的过程： webpack.config.js 同时配置了 ouput.publicPath 与 devServer 运行 npx webpack serve 启动开发服务器...所以问题的核心就是：「为何 Webpack 的 output.publicPath 会影响 webpack-dev-server 的运行效果」？...第三步：分析问题按照现有的情报，加上我对 HTTP 协议的理解，可以基本推断问题必然是出在 webpack-dev-server 框架处理首页请求的逻辑上，大概率是 output.publicPath...，逐层解密直到问题的根源

3.7K3 0

一步一步带你搭建一个“摩登”的前端开发环境

js 类型系统最近纠结一个问题，前端的 js 由于其动态的特性，写几行代码，在浏览器刷新一下就能看到结果了，非常适合快速开发和迭代。...这里我采用的 webpack babel 作为我们构建环境，所以首先我们需要安装 webpack 和 babel $npm install webpack babel-core babel-loader...webpack 的配置文件 webpack.config.js module.exports = { entry: "..../node_modules/.bin/eslint --init 这时 eslint 就会问你一些问题，一步步帮你完成初始化的工作，并生成对应.eslintrc 文件，这时候，我们需要更新一下 webpack.config.js...版 js 解析器 babel-eslint，这是由于 eslint 默认的 espree 解析器认不得 flow 的类型声明 $npm install eslint-plugin-flowtype babel-eslint

3K0 0

webpack file-loader 解析 css 文件中 background-image路径问题。

webpack file-loader 解析 css 文件中 background-image路径问题。...通过 webpack 的 file-loader 把 css 中的 background-image 图片提取出来构建到输出目录（例如dist或者build目录），发现图片被生成在了产出目录的根目录。...webpack.config.js文件配置 var webpack = require('webpack'); var vue = require('vue-loader'); var path = require...('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'), ExtractTextPlugin = require('extract-text-webpack-plugin...[ext]' },//limit参数，代表如果小于大约4k则会自动帮你压缩base64编码的图片 /*{ test: /\.(png|jpe?

1.8K3 0

webpack项目轻松混用css module

一、产生问题的原因 { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader...localIdentName: '[hash:base64:6]' } }, 'postcss-loader' ] } 以上代码片段，摘自webpack...', 'node_modules')] } 如上所示，将node_module文件夹内的文件，用exclude排除在外，不用当前rule进行处理。...2.单独处理node_module内的css文件 { test: /\.css$/, use: [ { loader: 'style-loader...', 'node_modules')] } 四、其他问题 less在使用css module时，对url的解析存在冲突，可以用resolve-url-loader进行解决，直接上代码： test: /

1.9K3 0

Webpack+Babel手把手带你搭建开发环境(内附配置文件)

先简单介绍一下Webpack和Babel Webpack webpack工作就是打包，只要你安装的插件就可以打包一切，并且会自动解析依赖项，是前端的热门工具。...让我们可以随意使用新语法而不用考虑浏览器的兼容性问题环境搭建 ?...dev-build已经没有警告了打包出来的文件名和目录和我们配置的一样但是现在又面临一个问题，我打包完怎么测试？.../, // 但是别全给转啊我不要转node_module里面的 include: /src/...添加到style标签里面去 {loader: "css-loader"}, // 解析import导入方式和 url()

1.8K1 1

Vue打包优化之code spliting

按需异步加载这个主要解决首屏请求大小的问题，我们在访问首屏的时候只需要加载首屏所需的逻辑，而不是加载所有路由的代码。...CommonChunkPlugin ventor入口这里我们发现并没有筛选出所有引用的node_module下的模块，比如axios ,所以导致打包到了app.js里了，这里我们做下分离 entry:...，我们再看看文件分布，会发现node_module下的模块都收归到了vendor下了。...async 上面的问题答案是肯定的，不可以的，很明显ventor是我们的入口代码即首屏，我们完全没有必要去加载这个codemirror组件，我们先把刚才的路由修改恢复回去。...利用commonChunkPlugin的minChunks属性来分离基础库(node_module)代码和业务代码并针对多次复用的模块进行单独打包； 2.

2.9K2 0

使用npm版本锁定的必要性

前端什么技术都有，react、vue、jquery、regular、seajs… 好在构建工具不复杂，也就是用的gulp + webpack 其实，还算是比较灵活了，虽然没有用nodejs，但是java...发布是走的公司运维开发的发布系统，由于历史原因，发布构建的时候，每修改一次代码需要分两步发版，分别是：前端发布：webpack+gulp构建，然后发前端静态资源到cdn 后端发布：webpack+gulp...而我们的node_module有的更新了，有的没有更新？这个还真的很有可能，因为我们的构建机器上的依赖包是优先缓存的，而之前为了做实验我做了清缓存的操作，有可能是有的更新了缓存，有的却没有更新。...因为有了这个猜想，便去验证一番，如果是安装包的问题，那么是不是说只需要做到几次安装的node_module下的依赖包版本一致，就能解决这个问题了呢？...总结与分析很明显，问题就是出在依赖包，因为使用了范版本，不同的机器安装的包是不一样的，那么构建出来的代码（尤其是压缩、babel等语法解析作用的包处理之后的代码）是非常可能不一样的。

1.7K1 0

解决webpack无法通过IP地址访问localhost的问题

问题描述：只能用http://localhost:8080访问项目,不能用http://本机IP:8080访问解决方案一： webpack dev配置文件中加上 host:'0.0.0.0' 解决方案二...：在 npm run dev 时添加参数 --host 0.0.0.0即可或者在webpack的package.json "scripts": { "dev": "webpack-dev-server...--inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0", "start": "npm run dev",

4.5K2 0

R模型构建学习2-解决质量差的钻石反而价格贵的问题

上次的代码： library(ggplot2) data(diamonds) ggplot(diamonds, aes(cut, price)) + geom_boxplot() ggplot(diamonds...price), lcarat = log2(carat)) ggplot(diamonds2, aes(lcarat, lprice)) + geom_hex(bins = 50) 最后得到了重量和价格的关系图...clarity vs lresid 以最后一个图为例，最左边残差为-1，即lprice 比仅使用重量进行估计的预测值少一个单位，由于取过log2，因此值为-1 的点的价格为预计价格的一半，残差为1 时，...价格则是预计价格的2 倍。...如果安装tidyverse的时候提示dplyr的namespace的问题，大概率是因为tidyverse需要>=0.8.3版本的dplyr，升级dplyr即可。

8071 0

有点难的 webpack 知识点：Dependency Graph 深度解析

然而事实远不止官网描述的这么简单，Dependency Graph 贯穿 webpack 整个运行周期，从 make 阶段的模块解析，到 seal 阶段的 chunk 生成，以及 tree-shaking...运行过程中如何收集模块间依赖关系，进而构建出 Dependency Graph Dependency Graph 构建完毕后，又是如何被消费的学习本文，您将进一步了解 webpack 模块解析的处理细节...依赖关系收集过程主要发生在两个节点： addDependency ：webpack 从模块内容中解析出引用关系后，创建适当的 Dependency 子类并调用该方法记录到 module 实例 handleModuleCreation...：模块解析完毕后，webpack 遍历父模块的依赖集合，调用该方法创建 Dependency 对应的子模块对象，之后调用 compilation.moduleGraph.setResolvedModule...实例解析看个简单例子，对于下面的依赖关系： Webpack 启动后，在构建阶段递归调用 compilation.handleModuleCreation 函数，逐步补齐 Dependency Graph

1.7K1 0

vue 随记（6）：构建的艺术

此过程可以理解为“只解析，不打包”。理论上支持react等任意前端开发框架。作者甚至在社交网络直言：他以后再不想用 webpack 了。 ?...) => { return content.replace(/from ['"]([^'"]+)['"]/g, (s0, s1) => { // 只改写需要去node_module找的...去node_module找依赖 // prefix 是相关依赖在node_modules下的绝对路径。...去node_module找依赖 // prefix 是相关依赖在node_modules下的绝对路径。...实际上就是原来webpack中各种loader的功能。此处以样式为例。

1.4K2 0

webpack的css压缩不兼容IOS8问题探索

webpack使用postcss的autoprefixer插件，并在压缩css时使用了cssnano，处理不当的情况下会导致压缩css后，部分兼容前缀（比如-webkit-）被删除的问题。...webpack1.x版本，UglifyJsPlugin这个插件开启了minimize，导致css-loader也开启了压缩，然后css-loader会使用cssnano进行压缩，而cssnano会使用到...less-loader'}, 而上述原因已经在webpack2.x修复，webpack2的UglifyJsPlugin插件去掉了强制开启minimize。...然而如果你不是使用的webpack1.x，通过排查发现，在css压缩插件未使用的时候，兼容前缀正常，一旦使用了OptimizeCssAssetsPlugin来压缩css就会丢失部分的webkit前缀。...autoprefixer: false }, canPrint: true }) 再次编译发现压缩状态时也带有全部的兼容前缀，ios8的不兼容问题即也解决

1.8K4 0

解决 webpack 打包后 z-index 重新计算的问题

开发时候遇到了一个问题，webpack 打包后 css 的 z-index 值与原始值不符，导致 iframe 里面的 toast 被外面 z-index 较小的 dialog 覆盖。...这本来是 webpack 插件的一个善举（让 z-index 数值更加合理），但是具体情况来看，这里显然不需要这个 “善举”。...观察之前项目中使用的框架，在生成 dialog 或者 toast 的时候，即使在 webpack 插件对 css 进行处理之后，其 z-index 依然是很大的。...于是仿照 element-ui 的做法，把 z-index 相关的 css 用 js 动态插入到 DOM 中，就完美地解决了这个问题，并且没有对其它项目产生影响。...在对代码进行打包之前，会扫描所有的模块，建立模块之间的依赖树，而插件的运作时机也是相对于此时的静态代码，因此用 js 动态插入 css，webpack 显然不会知道要插入的 css 是什么样的，因此动态插入的

1K2 0

16. 使用vue3结构及配置管理

- 一. vue-cli2和vue-cli3的区别 vue-cli3 是基于webpack4的, vue-cli2是基于webpack3 vue-cli3的设计原则是"0配置", 移除了配置文件根目录下...$mount('#app') 其实这两种写法是一个意思. el:'#app',vue在解析的时候, 会去执行$mount("#app")....这里面就有我们之前在webpack.config.js中定义的输入路径,输出路径, 公共路径等....在node_module中@vue目录下. ? 在@vue目录下, 找到cli-service目录, 现在vue的配置都交给了cli-service来管理....在cli-service目录下, 有一个webpack.config.js.这个就是webpack的配置. // this file is for cases where we need to access

1.8K2 0

Vue打包优化之code spliting

按需异步加载这个主要解决首屏请求大小的问题，我们在访问首屏的时候只需要加载首屏所需的逻辑，而不是加载所有路由的代码。...CommonChunkPlugin ventor入口这里我们发现并没有筛选出所有引用的node_module下的模块，比如axios ,所以导致打包到了app.js里了，这里我们做下分离 entry:...，我们再看看文件分布，会发现node_module下的模块都收归到了vendor下了。...async 上面的问题答案是肯定的，不可以的，很明显ventor是我们的入口代码即首屏，我们完全没有必要去加载这个codemirror组件，我们先把刚才的路由修改恢复回去。...但是这时又有了新问题，我们的codemirror被同时打包进了两个单页面，并且还有些自己封装的components，例如MTable或是MDataTable等也出现了重复打包。

4.8K10 0

Webpack插件是如何编写的——prerender-spa-plugin源码解析

概述本文主要的内容是通过之前使用的prerender-spa-plugin插件的源码阅读，来看下我们应该如何编写一个webpack的插件，同时了解下预渲染插件到底是如何实现的。...这个内容其实已经在使用prerender-spa-plugin里面有所涉及了，这一章的内容算是对之前一篇文章的补充和拓展，详细介绍下Webpack的插件机制到底是如何运行的，之前写的简单的替换的插件生效的原理到底是什么...在使用这个插件的过程中，我们需要先进行初始化。这个函数可以用来进行一些数据的处理和解析。一个原型上的apply函数，作为一个钩子函数，主要用于处理Webpack触发插件执行后，相关逻辑的处理。...一个原型链上的apply方法。 - 一个钩子函数。 - 一个绑定生命周期的代码。有了这些东西，我们的一个Webpack的插件就完成了。...希望通过一个插件源码的示例，能够让大家了解下我们日常使用的看似很复杂的Webpack插件，到底是怎么实现的。

1K4 0

点击加载更多

webpack编译打包出现的问题!

关于webpack中无法解析的原因

我是如何调试 Webpack 问题的

webpack5.x 遇到的问题

我是如何调试 Webpack 问题的

一步一步带你搭建一个“摩登”的前端开发环境

webpack file-loader 解析 css 文件中 background-image路径问题。

webpack项目轻松混用css module

Webpack+Babel手把手带你搭建开发环境(内附配置文件)

Vue打包优化之code spliting

使用npm版本锁定的必要性

解决webpack无法通过IP地址访问localhost的问题

R模型构建学习2-解决质量差的钻石反而价格贵的问题

有点难的 webpack 知识点：Dependency Graph 深度解析

vue 随记（6）：构建的艺术

webpack的css压缩不兼容IOS8问题探索

解决 webpack 打包后 z-index 重新计算的问题

16. 使用vue3结构及配置管理

Vue打包优化之code spliting

Webpack插件是如何编写的——prerender-spa-plugin源码解析

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐