Question

我不确定webpack是否应该使用下面给定的配置生成源图。

如果是，我应该在哪里找到它？

我无法从浏览器调试窗口中找到它（见图片）。 Chrome说它检测到源地图，但我找不到它们。有什么问题？

public目录为空，那么它可能在哪里？

另外，我在哪里可以找到生成的bundle.js？它也不在public（我手动创建 - 希望它能解决问题）。

有什么想法吗？

可以在github上找到所有源here。

Jozsefs-MBP:react-webpack-babel joco$ npm start

> react-webpack-babel@0.0.3 start /Users/joco/dev/react/redux/egghead-tutorial/react-webpack-babel
> webpack-dev-server --progress --profile --colors

 70% 1/1 build modules http://127.0.0.1:8888/
webpack result is served from /
content is served from ./public
404s will fallback to /index.html
4826ms build modules
9ms seal
7ms optimize
13ms hashing
45ms create chunk assets
15ms additional chunk assets
1723ms optimize chunk assets
117ms optimize assets
36ms emit
^C
Jozsefs-MBP:react-webpack-babel joco$ npm start

> react-webpack-babel@0.0.3 start /Users/joco/dev/react/redux/egghead-tutorial/react-webpack-babel
> webpack-dev-server --progress --profile --colors

 70% 1/1 build modules http://127.0.0.1:8888/
webpack result is served from /
content is served from ./public
404s will fallback to /index.html
4747ms build modules
9ms seal
7ms optimize
13ms hashing
40ms create chunk assets
16ms additional chunk assets
93ms optimize chunk assets
126ms optimize assets
29ms emit
^C
Jozsefs-MBP:react-webpack-babel joco$ ls
LICENSE                         npm-debug.log                   src
README.md                       package.json                    webpack.config.js
flow-typed                      postcss.config.js               webpack.loaders.js
node_modules                    public                          webpack.production.config.js
Jozsefs-MBP:react-webpack-babel joco$ ls public/
fasz
Jozsefs-MBP:react-webpack-babel joco$ cat webpack.config.js
"use strict";
var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');

const HOST = process.env.HOST || "127.0.0.1";
const PORT = process.env.PORT || "8888";

// global css
loaders.push({
        test: /[\/\\](node_modules|global)[\/\\].*\.css$/,
        loaders: [
                'style?sourceMap',
                'css'
        ]
});
// local scss modules
loaders.push({
        test: /[\/\\]src[\/\\].*\.scss/,
        exclude: /(node_modules|bower_components|public)/,
        loaders: [
                'style?sourceMap',
                'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
                'postcss',
                'sass'
        ]
});

// local css modules
loaders.push({
        test: /[\/\\]src[\/\\].*\.css/,
        exclude: /(node_modules|bower_components|public)/,
        loaders: [
                'style?sourceMap',
                'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
        ]
});

module.exports = {
        entry: [
                `webpack-dev-server/client?http://${HOST}:${PORT}`,
                `webpack/hot/only-dev-server`,
                `./src/index.jsx` // Your appʼs entry point
        ],
        devtool: process.env.WEBPACK_DEVTOOL || 'cheap-module-source-map',
        output: {
                path: path.join(__dirname, 'public'),
                filename: 'bundle.js'
        },
        resolve: {
                extensions: ['', '.js', '.jsx']
        },
        module: {
                loaders
        },
        devServer: {
                contentBase: "./public",
                // do not print bundle build stats
                noInfo: true,
                // enable HMR
                hot: true,
                // embed the webpack-dev-server runtime into the bundle
                inline: true,
                // serve index.html in place of 404 responses to allow HTML5 history
                historyApiFallback: true,
                port: PORT,
                host: HOST
        },
        plugins: [
                new webpack.NoErrorsPlugin(),
                new webpack.HotModuleReplacementPlugin(),
                new HtmlWebpackPlugin({
                        template: './src/template.html'
                }),
        ]
};
Jozsefs-MBP:react-webpack-babel joco$

Answer 1

尝试将此添加到网络包的选项中：

devtool: 'source-map'

它对我有用。而共同的价值＃eval-source-map＆＃39;没有（特别是在网络服务器中）。

使用dev服务器时webpack生成sourmaps有问题

1 个答案: