Webpack模块类型的源映射指向未定义的文件。

Question

Webpack模块类型的源映射指向未定义的文件。

3

我正在开发一个包含多个小部件的应用程序。这些小部件相当大，因此它们被放置在父目录下的不同子目录中。文件结构看起来像这样：

./
+-- server/
|
+-- client/
|
+-- widget1/
|
+-- widget2/
|
+-- widget3/
|
+-- package.json
+-- webpack.base.config

每个小部件都是一个模块，与其他客户端和小部件完全分离，并且它们是独立开发的，具有自己的开发服务器等。

问题在于：当将webpackConfig.devtool设置为使用module的任何内容时（例如cheap-module-source-map），小部件文件将无法接收到正确的源映射。相反，它们会收到类似于(index):40的文件名/行号。(当鼠标悬停时，显示webpack:///:40) 在Chrome中单击该文件时，它会指向一个包含这些内容的文件。

undefined


/** WEBPACK FOOTER **
 ** 
 **/

现在非常奇怪的是，即使是构建客户端应用程序时，将所有小部件和客户端代码汇集在一起，只有小部件文件具有这些混乱的源映射。

每个小部件的内容都只是一堆.js和.scss文件，并且有一个index.html和development-server.js用于开发。客户端代码几乎相同，除了开发文件。

这是webpack-1，版本号为1.13.0。

我的webpack.base.config看起来像这样：

const babelQuery = {
  es2015: require.resolve('babel-preset-es2015'),
  react: require.resolve('babel-preset-react'),
};

function createQuery(...paths) {
  return paths.map(resolvePath => `presets[]=${resolvePath}`).join(',');
}

const fullQuery = createQuery(babelQuery.es2015, babelQuery.react);

module.exports = {
  cache: true,
  context: __dirname,
  debug: true,
  devtool: '#cheap-module-source-map',

  entry: {},

  output: {},

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

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: `babel-loader?cacheDirectory,${createQuery(babelQuery.es2015)}`,
        exclude: /node_modules/,
      },
      {
        test: /\.jsx$/,
        loader: `react-hot-loader!babel-loader?cacheDirectory,${fullQuery}`,
        exclude: /node_modules/,
      },
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
      {
        test: /\.scss$/,
        loader: 'style-loader' +
        '!css-loader?modules&sourceMap&localIdentName=[name]__[local]___[hash:base64:5]' +
        '!postcss-loader!sass-loader?outputStyle=expanded&sourceMap',
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader?name=img/[name].[ext]',
      },
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?v=\d+\.\d+\.\d+)?(\?[a-z0-9]+)?$/,
        loader: 'file-loader',
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]',
        include: /flexboxgrid/,
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
        exclude: /flexboxgrid/,
      },
    ],
  },

  postcss() {
    return [autoprefixer];
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
      },
    }),
  ],
};

小部件的开发服务器如下修改基本配置：（如果有关系的话）

  context: __dirname,
  entry: {
    bundle: [
      'webpack/hot/dev-server',
      'webpack-hot-middleware/client',
      './entry.jsx',
    ],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: `http://localhost:${PORT}/assets/`,
    filename: '[name].js',
  },

- Justin Schultz

你解决了吗？我也遇到了同样的问题... - shfx

不，我还没有解决它。我的当前解决方法是避免在我的源代码映射配置中使用“module”（现在特别使用“cheap-eval-source-map”），但是我的源代码映射变得更糟了。转换后的代码可能很难导航。 - Justin Schultz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- shfx · Answer 1

尝试使用eval-source-map或source-map。

我知道它会慢一些，但在开发模式下重新构建的时间稍长，它可以正常工作。

我的webpack配置中的加载器如下：

{
  output: {
    pathinfo: true,
    path: path.join(__dirname, "build"),
    filename: "app.js",
    publicPath: "/"
  },

  entry: [
    "webpack-dev-server/client?http://0.0.0.0:3000",
    "webpack/hot/only-dev-server",
    "babel-polyfill",
    "whatwg-fetch",
    path.join(__dirname, "./main")
  ],

  devtool: "eval-source-map",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: [
          path.join(__dirname, "src"),
          path.join(__dirname, "node_modules/localforage")
        ],
        loader: "react-hot!babel?cacheDirectory"
      },
    ]
  }

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.DefinePlugin({
      "process.env": {
        "NODE_ENV": "\"development\"",
        "BASE_DIR": "\"baseDir\"",
      }
    })
  ]
}

还有我的 .babelrc 文件：

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": ["transform-decorators-legacy"],
  "env": {
    "production": {
      "presets": ["react-optimize"]
    }
  }
}