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