报错代码:
node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81 r.forEach(function(r) { ^ TypeError: r.forEach is not a function
当我们在使用webpack编译代码的时候,如果配置文件《webpack.config.js》格式不正确就会报错,而上面的也是webpack经常会遇到的错误,根据提示,我们发现是 LoadersList报错的,那我们就定位在配置文件里面的loaders部分,看看哪里出现问题了,定位发现:
// 之前的配置: loaders: [{ test: /\.jsx?$/, loaders: ['babel?presets[]=es2015&presets[]=react'], include: path.join(__dirname, 'app/scripts') } // 当我们添加 .babelrc来替代 babel 参数的时候,修改成: loaders: [{ test: /\.jsx?$/, loaders: 'babel', // 问题出现在这里,我们改了后面的loader,前面的s代表集合代码就冲突了 include: path.join(__dirname, 'app/scripts') }
正确的配置:
// 当是一个loader就用loader,集合就用loaders +s loaders: [{ test: /\.jsx?$/, loader: 'babel', include: path.join(__dirname, 'app/scripts') }
遇到问题也不要担心,找到问题解决就好。
有疑问或技术交流,扫描公众号一起讨论学习。
更多React在线学习访问:http://each.sinaapp.com/react/index.html
相关推荐
webpack-dev-server模块的使用 : webpack-dev-server-demo.zip
webpack-filter-warnings-plugin 允许您从Webpack编译中隐藏某些警告 安装 npm i -D webpack-filter-warnings-plugin 用法 // webpack.config.js const { FilterWarningsPlugin } = require ( 'webpack-filter-...
webpack-dev-server 为你提供了一个简单的 web 服务器,并且能够实时重新加载。这里用一个最简单的例子,让大家迅速的了解原理,避免被其他的附加技术干扰。
webpack-dev-server-waitpage Webpack Webpack进度等待页面 不用等待webpack完成编译,而可以看到一个不错的进度等待页面。 安装 npm npm install -D webpack-dev-server-waitpage 纱 yarn add -D webpack-dev-...
前端开源库-webpack-virtual-modulesWebpack虚拟模块、Webpack虚拟模块
使用webpack-dev-middleware:最简单使用webpack-dev-middleware,避免被其他是技术干扰,迅速的理解原理。
这是一个示例: : 实施(中文): : 安装npm i -D webpack主题颜色替换器Webpack的Cofig const ThemeColorReplacer = require ( 'webpack-theme-color-replacer' )module . exports = { // ..... oth
webpack-aliyun-oss-plugin webpack上传阿里云oss插件,能够在文件输出到output.path之后自动将静态资源发布到阿里云 注意:这个插件应该在生产环境使用 安装 npm install @msidolphin/webpack-aliyun-oss-plugin -...
资源分类:Python库 所属语言:Python 资源全名:webpack-s3-2019.8.30.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
react-webpack-es6-样板命令Lifecycle scripts included in react-webpack-es6-boilerplate: test npm run karmaavailable via `npm run-script`: assets:build NODE_ENV=production webpack --config ./webpack....
Webpack Vue基本配置 使用此基本配置包可以清理所有复杂的设置,并依靠自动的依赖项更新。 如何 :warning: 确保已安装所有对等依赖项 // webpack.js const webpackConfig = require ( '@nextcloud/webpack-vue-...
webpack-hot-client-overlay 这是一个早期的原型,提供了与webpack-hot-client一起使用的浏览器内覆盖。笔记这主要是webpack-hot-middleware等效代码的直接复制粘贴端口。 目前,它打算足够我用于我自己的目的,如果...
如果想要使用a task runner类似于grunt 或 gulp, 选择 webpack-dev-server API.如果想要使用你自己的node脚本来运行webpack, 选择 webpack-dev-server API.已经使用express或别的框架了, 选择 webpack-hot-...
资源来自pypi官网。 资源全名:django-webpack-loader-0.1.2.tar.gz
webpack-dev-server 将与提供实时重载的开发服务器一起使用。 这应该仅用于开发。 它在使用了 ,它提供对webpack资产的快速内存访问。目录入门首先,安装模块: npm install webpack-dev-server --save-dev 注意:...
webpack入门和实战(二):全面理解和运用loader和plugins,webpack-url-loader-master.
webpack-dev-中间件 与捆绑包一起使用的快速开发中间件,可用于服务从Webpack发出的文件。 这应该仅用于开发。 使用此中间件的一些好处包括: 没有文件写入磁盘,而是处理内存中的文件 如果文件以监视模式更改,则...
webpack-web-app-manifest-plugin webpack-web-app-manifest-plugin是一个Webpack插件,可生成PWA清单并与生成的资产JSON集成。如何安装npm install --save-dev webpack-web-app-manifest-plugin 或者yarn add ...
Webpack扩展重新加载器一个Webpack插件,可在开发过程中自动重新加载浏览器扩展。正在安装npm npm install webpack-extension-reloader --save-dev 纱yarn add webpack-extension-reloader --dev解决方案... 您是否...
免责声明此存储库和软件包已归档,建议使用Webpack Chrome扩展程序重新加载器一个Webpack插件,可在开发Chrome扩展程序时启用热重载。正在安装npm npm install webpack-chrome-extension-reloader --save-dev纱yarn ...