Webpack模块类型的源映射指向'undefined'文件

Question

我正在构建一个包含多个小部件的应用程序。这些小部件的大小相当大，所以它们被放置在父目录内的单独的子目录中。文件结构看起来是这样的：

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

每个小部件都是从其他客户和部件完全分离的模块，并在自己的开发，拥有自主开发的服务器等

---

现在的问题是：当将webpackConfig.devtool设置为使用module（即cheap-module-source-map）的任何内容时，小部件文件不会收到正确的源映射。相反，他们收到一个文件名/行号，如下所示：(index):40。 （或webpack:///:40鼠标悬停时），当点击铬所述文件，它指向我与这些内容的文件：

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'), 
     }, 
    }), 
    ], 
}; 

窗口小部件的开发服务器上修改配置的基础，像这样：（如果它的事项）

​​

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"] 
    } 
    } 
}