Question

将带有devtool: source-map的应用部署到生产环境后，我无法使用服务器上的.js源文件映射我机器中的本地源地图文件。

基本上，这里是我遵循生产的步骤：

我使用命令"./node_modules/.bin/webpack --config webpack.build.config.js --progress --colors --optimize-minimize --display-optimization-bailout"运行构建，它生成我的应用程序所需的.js和.map文件。我将此文件夹的副本复制到本地桌面。
我从文件夹中删除了所有的.map文件（我不想出于显而易见的原因将它们分发给客户端）并将其发送到生产服务器。

我的webpack build config如下：

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const WebpackShellPlugin = require('webpack-shell-plugin');
var fs = require("fs");
var WebpackOnBuildPlugin = require('on-build-webpack');

module.exports = {
    entry: { 
        "myapp": './myapp/main-bootstrap.js',
        "vendor": [     
             'angular',
             'angular-ui-router',
             'angular-animate',
             'angular-translate',
             'angular-dynamic-locale',
             'angular-ui-bootstrap',
             './myapp-dep/angular-translate/2.15.1/angular-translate-loader-partial.min.js',
             './myapp-dep/environment/0.0.3/environment.js',
        ],
        "styles": [
            './myapp-dep/bootstrap/3.3.7/css/bootstrap.min.css',
            './myapp/main.css'
        ]
    },
    output: {
        path: path.join(__dirname, "app"), 
        publicPath: './app/',
        filename: "[name]-[chunkhash:15].js", 
        chunkFilename: '[chunkhash].js'
    },
    module: { 
        rules: [] // my rules... too long to share and they are not important to this case
    },
    resolve: { 
        modules: ['myapp', 'node_modules'],
        alias: {
            bundle: path.resolve('./app'),
            root: path.resolve(__dirname, 'myapp'),
            dep: path.resolve(__dirname, 'myapp-dep')
        },
        extensions: ['.js', '.jsx']
    },

    devtool: 'source-map',
    plugins: [  
      new WebpackShellPlugin({ onBuildStart: ['del "myapp-libs\\vendor*.js"', 'del "myapp-libs\\vendor*.map"', 'del app /Q /S'] }),
      new ExtractTextPlugin("styles-[chunkhash:15].css"),
      new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: '../myapp-libs/vendor-[chunkhash:15].js' }),
      new webpack.NamedChunksPlugin(),
      new webpack.NamedModulesPlugin(),
      new webpack.optimize.CommonsChunkPlugin({ name: 'runtime' }),
      new webpack.optimize.ModuleConcatenationPlugin(),

      new WebpackOnBuildPlugin(function(stats) {
          let assets = stats.toJson().assets; 
          let myappHash = assets.find(asset => asset.name.startsWith('myapp-')).name;
          let styleHash = assets.find(asset => /^styles-.*(\.css$)/g.test(asset.name)).name;
          let vendorHash = assets.find(asset => asset.name.startsWith('../myapp-libs/vendor-')).name.replace('../myapp-libs/', '');
          let runtimeHash = assets.find(asset => asset.name.startsWith('runtime-')).name;

          let index = fs.readFileSync('index.html', 'utf8');
          index = index.replace(/<script src="app\/myapp-*\w*.js"><\/script>/i, '<script src="app/' + myappHash + '"></script>')
              .replace(/<link rel="stylesheet" href="app\/styles-*\w*.css">/i, '<link rel="stylesheet" href="app/' + styleHash + '">')
              .replace(/<script src="myapp-libs\/vendor-*\w*.js"><\/script>/i, '<script src="myapp-libs/' + vendorHash + '"></script>')
              .replace(/<script src="app\/runtime-*\w*.js"><\/script>/i, '<script src="app/' + runtimeHash + '"></script>');

          fs.writeFileSync('index.html', index, { flag: 'w' });
      })
    ]
};

现在，让我们假设我的应用程序出现错误。

如何将我拥有的源地图与服务器上的.js文件进行映射？我已经尝试了"add folder to workspace"选项，但它似乎对我不起作用（但可能是由于我的错误）。

以chrome

0 个答案: