Question

我正在移植一个使用browserfiy到webpack的现有项目。以前导入语句如：

import MyClass from './MyClass'

......会奏效。现在我必须添加.jsx扩展名

import MyClass from './MyClass.jsx'

这是我的加载器定义：

var path = require("path");

module.exports = {
  devServer: {
    inline: true,
    port: 10000 // Defaults to 8080
  },
  entry: {
    app: ['./src/app.jsx']
  },
  output: {
    path: path.resolve(__dirname, "public/scripts"),
    publicPath: '/scripts',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style!css"
      },
      {
        test: /\.sass$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: [
            "es2015",
            "stage-0",
            "react"
          ],
          plugins: [
            "transform-flow-strip-types"
          ]
        }
      }
    ]
  }
};

知道如何说服webpack在没有扩展名的情况下加载吗？

Answer 1

Webpack依赖于resolve.extensions配置来了解在进行模块解析时要考虑哪些扩展。从Webpack 4.0.0开始，默认值为['.wasm', '.mjs', '.js', '.json']，因此需要手动添加.jsx扩展名。将其包含在webpack配置对象的根目录中：

resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']
},

假设.jsx以webpack结尾的ES6 import语句

1 个答案: