Question

我有一个最小的webpack1配置，我已经削减了一个大型项目，只是为了重现这个。

当我使用webpack-dev-server运行我的配置时，它工作得很好，除了文件只能在localhost:port/bundle.js.map访问，而不能在我的本地项目dist文件夹中访问。

使用说明链接到repo：https://github.com/rublev/webpack-nosourcemaps

webpack.config.base.js

module.exports = {
    output: {
        path: path.join(process.cwd(), '/dist'),
        publicPath: '/',
        filename: 'bundle.js'
    },
    resolve: {
        root: path.join(__dirname, ''),
        modulesDirectories: [
            'node_modules',
            'app'
        ],
        extensions: ['', '.html', '.js'] // removing '' makes everything explode
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack-sourcemap',
            template: 'app/index.html'
        })
    ],
    module: {
        loaders: [],
    }
}

webpack.config.production.js

var config = require('./webpack.config.base.js')

config.devtool = 'source-map'

if (process.env.NODE_ENV !== 'test') {
    config.entry = {
        main: path.join(process.cwd(), '/app/') + 'app.js',
        vendor: [
            'react',
            'react-dom'
        ]
    }
}

config.output = {
    path: path.join(process.cwd(), '/dist'),
    pathInfo: true,
    publicPath: '/',
    filename: 'bundle.js'
}

config.module.loaders = config.module.loaders.concat([
    {
        test: /\.js$/,
        loaders: ['babel'],
        exclude: /node_modules/
    }
])

config.plugins = config.plugins.concat([
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        filename: 'vendor.js'
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
            warnings: false
        }
    }),
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    })
])

module.exports = config

Answer 1

您运行此代码

NODE_ENV=production webpack-dev-server ...

像这样添加 -d 标志

NODE_ENV=production webpack-dev-server -d...

Development shortcut -d

等于--debug --devtool source-map --output-pathinfo

Answer 2

添加到您的生产配置config.devtool = 'source-map';，以获得最高质量的生产源图。

其他制作选项包括cheap-source-map，cheap-module-source-map和nosources-source-map。

你的UglifyJsPlugin中已经设置了sourceMap: true，这很好，否则就不会生成源地图文件。

资源： https://webpack.js.org/configuration/devtool/

如何将源图文件输出到我的构建文件夹？

2 个答案: