reactjs - Webpack 2 - 无法在字符串上创建属性 'mappings'

标签 reactjs webpack webpack-2

从工作的 Webpack v1 配置迁移到 Webpack 2。但在尝试运行构建时遇到错误:

 ERROR in ./src/index.jsx
 Module build failed: TypeError: /home/pierce/Projects/my-js-app/src/index.jsx: Cannot create property 'mappings' on string 

我已经更新了加载器以匹配新格式:

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: "babel-loader"
    },
    {
      test: /\.(jpg|png)$/,
      loader: 'file-loader',
      query: {
        name: '[path][name].[hash].[ext]',
      },
    },
    { 
      test: /\.css$/, 
      loader: "style-loader!css-loader" 
    },
    {
      test: /\.scss$/,
      use: [
        { 
          loader: 'style-loader' 
        },
        { 
          loader: 'css-loader'
        }, 
        { 
          loader: 'sass-loader',
          options: { sourceMap: true } 
        }
      ]
    },
    {
      test: /\.(woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?/, 
      loader: 'url-loader',
      query: { 
        limit: 100000
      }
    },
    { 
      test: /\.icon-svg$/, 
      use: [{loader:'babel-loader'}, {loader: 'svg-react-loader'}] 
    },
    // Bootstrap 3
    { 
      test: /bootstrap-sass\/assets\/javascripts\//, 
      loader: 'imports-loader?jQuery=jquery' 
    }
  ]
},

就好像有些东西没有按照以前的方式编译,因此导致了 TypeError。

最佳答案

原来我是 babelifing 两次。

如果您还将 webpack.config.js 拆分为不同环境的单独文件,请确保 webpack.dev.config.js 不包含如果你的 webpack.base.config.js 有一个 babel-loader 条目。

否则,如果您第二次使用加载器两次,将会导致错误。这不是 Webpack 2 错误,而是 Webpack splitting-configs-and-missing-a-small-thing 错误

关于reactjs - Webpack 2 - 无法在字符串上创建属性 'mappings',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42698214/

相关文章:

node.js - 在 React 中使用服务器端渲染的最佳方法是什么?

arrays - Array shuffle 在开发时工作,但在生产构建时不工作(React/Gatsby)

javascript - Reactjs 函数用于根据两个输入更改状态元素

javascript - 使用 webpack 的 require.ensure 函数为 javascript 模块编写测试

javascript - 如何在使用 require.context 后动态加载 Vue 组件?

网页包,CSS : where to put images?

Webpack -p 慢速构建 "[BABEL]"注意 : The code generator has deoptimised the styling of "file.jsx" as it exceeds the max of "500KB"

javascript - 如何读取 Javascript 中的 Less 变量?

javascript - React - Internet Explorer 11 输入在第一次 onchange 后失去焦点

javascript - 从 HTML 文件访问捆绑的 javascript(使用 webpack)中的函数