如何获取源映射文件以输出到我的构建文件夹？答案

【问题标题】：How do I get sourcemap files to output to my build folder?如何获取源映射文件以输出到我的构建文件夹？
【发布时间】：2017-11-06 20:49:12
【问题描述】：

我有一个最小的 webpack1 配置，我将一个大型项目缩减为只是为了重现它。

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

带有说明的回购链接：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

【问题讨论】：

标签： javascript webpack babeljs minify source-maps

【解决方案1】：

你运行这段代码

NODE_ENV=production webpack-dev-server ...

像这样添加 -d 标志

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

Development shortcut-d

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

【讨论】：

【解决方案2】：

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

其他生产选项为cheap-source-map、cheap-module-source-map 和nosources-source-map。

最好你已经在你的 UglifyJsPlugin 中设置了sourceMap: true，否则不会生成源映射文件。

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

【讨论】：