webpack打包遇到locals[0] does not appear to be a `module` object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using `env` section in Babel configuration

解决办法:

1.删除.bablerc文件的env下的"development": {"presets": ["react-hmre"]}

2.在webpack.config的loader添加以下代码

module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: ‘babel‘,
        include: path.join(__dirname, ‘src‘),
        query: {
          plugins: [
            ["react-transform", {
              transforms: [{
                transform: "react-transform-hmr",
                imports: ["react"],
                locals: ["module"]
              }, {
                "transform": "react-transform-catch-errors",
                "imports": ["react", "redbox-react"]
              }]
            }]
          ]
        }
      }
    ]
  }
时间: 2024-10-11 12:50:15

webpack打包遇到locals[0] does not appear to be a `module` object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using `env` section in Babel configuration的相关文章

[转] Webpack 打包优化之体积篇

谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝座的 Gulp, 以及独树一帜的 fis3, 以及下一代打包神器 Rollup :在 browserify,grunt,gulp,rollup,webpack 可以一窥其中部分对比.在本文要探究的是,当前打包工具绝对霸者 Webpack. Webpack Package optimization W

Webpack 打包优化之体积篇

谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝座的 Gulp, 以及独树一帜的 fis3, 以及下一代打包神器 Rollup :在 browserify,grunt,gulp,rollup,webpack 可以一窥其中部分对比.在本文要探究的是,当前打包工具绝对霸者 Webpack. Webpack Package optimization W

webpack打包avalon

webpack打包avalon+oniui+jquery 随着avalon的发展壮大,我根据CSDN的统计数字,中国前端大概有1%的人在使用avalon了. avalon的最大优势是能兼容IE6,并且其API是非常稳定,只是在1.3.7 对ms-duplex的拦截器做了一次改动(但这次改动也向下兼容),1.5中去除avalon.define的旧风格支持,废掉ms-widget指令改成更强大的自定义标签指令.相对于其他MVVM框架来说,是非常的良心.此外,配套是非常完善,尤其是oniui,也支持到

webpack打包(一)

1.安装webpack打包工具 webpack是使用npm安装 npm install webpack -g //全局安装 在命令行中就可以使用webpack这个命令了. 提示:由于npm安装会去找国外镜像,所以安装国内淘宝cnpm镜像 npm install cnpm -g 以后所有的npm操作都用cnpm命令代替就行! 注:webpack采用的是commonJs规范 使用webpack(一) calc.js function add(x, y) { return x + y; } modul

Webpack打包进阶

说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码分包.异步模块加载特性.看看它们又是如何对PC部落的性能起到进一步的催化作用. 为什么要使用webpack 如果你曾经使用过 Broserify, RequireJS 或类似的打包工具,并注重:代码分包.异步加载.静态资源打包(图片/CSS).那么 webpack 就是帮你构建项目的利器!简单一句话

webpack 打包文件体积过大解决方案(code splitting)

优化对比 : 未优化前:index.html引入一个main.js文件,体积2M以上. 优化后入:index.html引入main.js.commons.js.charts.js.other.js.以达到将main.js平分目的.每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具: vue.webpack.babel.highcharts.echarts.jquery.html2canvas******此去省略若干m代码 问题: 开发环境用webpack后发现单个js文件

node.js学习之webpack打包react最简单用法

研究一天多也没弄出来个毛,今天早上来到随便一试,嘿,结果成了.最简洁最简单的使用方法,记录下来. 首先,安装webpack命令: $ npm install webpack -g 全局安装,可以在cmd中使用webpack命令. 然后创建一个项目,项目名称webpack,我这里用的是webstorm11.创建成功之后cmd进入项目根目录,执行命令: $ npm init 这个命令会创建一个package.json的文件,是整个项目的配置文件,添加上webpack的依赖包: "devDepende

浅谈webpack打包原理

浅谈webpack打包原理 模块化机制 webpack并不强制你使用某种模块化方案,而是通过兼容所有模块化方案让你无痛接入项目.有了webpack,你可以随意选择你喜欢的模块化方案,至于怎么处理模块之间的依赖关系及如何按需打包,webpack会帮你处理好的. 关于模块化的一些内容,可以看看我之前的文章:js的模块化进程 核心思想: 一切皆模块: 正如js文件可以是一个"模块(module)"一样,其他的(如css.image或html)文件也可视作模 块.因此,你可以require('

webpack打包原理

Webpack 一个模块打包器,将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 本身只能打包js模块,自带BGM如虎添翼(Loader转换器)[将各种类型的资源转换成js模块] 安装 $ npm intsall webpack -g 在项目文件中安装webpack依赖 #进入安装目录 #确定已经有package.json,没有的话就通过npm init 创建 #安装webpack依赖 $npm install webpack --save-dev 查看版本信息