2017-06-06 42 views
4

我有一個最小的webpack1配置,我已經削減了一個龐大的項目,只是爲了重現這一點。如何獲取源圖文件以輸出到我的構建文件夾?

當我跑我的配置用的WebPack-dev的服務器,它工作得很好,除了該文件僅在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 

回答

0

運行這段代碼

NODE_ENV=production webpack-dev-server ...

添加-d標誌這樣

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

Development shortcut-d

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

0

添加到您的生產配置config.devtool = 'source-map';爲最高優質的生產源圖。

其他生產選項是cheap-source-map,cheap-module-source-mapnosources-source-map

很好,你已經在你的UglifyJsPlugin中設置了sourceMap: true,否則不會生成源文件映射文件。

資源: https://webpack.js.org/configuration/devtool/

相關問題