下記のスクリーンショットでは、当社ウェブサイトが2つのメイン.jsファイル(& lib)を読み込んでいることがわかります。私たちの.jsファイルはwebpackによって構築され、その下に//# sourceMappingURL=/path/to/script.js
のないプロダクションのために出力されます。 X-SourceMap: /path/to/script.js.map
のようなヘッダも返されません。webpackは、ソースマップが生成されていないと、なぜそれを生成したのですか?
なぜChromeはソースマップを取得しようとしたときにコンソールエラーをスローしますか?
index.jsとは何ですか?私たちのサイトにはそのファイルがありません。
私たちのサイトは、Dockerコンテナ内のhttp-serverノードモジュールによるサーバーであり、nginxによって提供されます。以下
更新
デレクの答えはWebPACKのは、実際にそれがsourcemapを生成し、またしていなくても、私たちの出力ファイルに#sourcemapのコメントが追加されていることを示していますそれは1つを生成するように頼んだ。
なぜ、webpackはコンパイルされたapp.jsファイルに存在しないソースマップへの参照を入れていますか?
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
var rootPath = __dirname; // e.g. ~/projects/ekaya
var srcPath = path.join(rootPath, 'src');
var distPath = path.join(rootPath, '../dist/client_gumtree/app');
var shared
Path = path.resolve('../shared');
module.exports =
{
bail: true,
cache: false,
context: rootPath,
debug: false,
//devtool: 'source-map', //inline-source-map, https://webpack.github.io/docs/configuration.html#devtool
target: 'web', //node, web
// devServer:
// {
// contentBase: distPath,
// historyApiFallback: true,
// outputPath: path.join(distPath, 'devServer'),
// hot : true,
// },
entry:
{
app: ['babel-polyfill', path.join(srcPath, 'core/index.ts')],
lib: ['babel-polyfill', 'react', 'react-router', 'react-dom', 'lodash', 'history',
'react-redux', 'redux-thunk', 'redux-api-middleware', 'redux']
},
output:
{
path: distPath,
publicPath: '',
filename: '/[name].js',
pathInfo: true
},
resolve:
{
root: srcPath,
extensions: ['', '.js', '.jsx', '.ts', '.tsx'],
modulesDirectories: ['node_modules', srcPath, 'typings']
},
module:
{
loaders:
[
{test: /\.js$/, loader: 'babel-loader?cacheDirectory', include: [srcPath, sharedPath]},
{test: /\.jsx$/, loader: 'babel-loader?cacheDirectory', include: [srcPath, sharedPath]},
{test: /\.ts$/, loader: 'babel-loader!ts-loader?cacheDirectory', include: [srcPath, sharedPath]},
{test: /\.tsx$/, loader: 'babel-loader!ts-loader?cacheDirectory', include: [srcPath, sharedPath]},
{test: /\.json$/, loader: 'json-loader'},
{test: /\.scss$/, loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[name]-[local]---[hash:base64:5]',
'cssnext',
'resolve-url',
'sass?sourceMap'
]},
{test: /\.png$/, loader: 'file-loader'},
{test: /\.jpg$/, loader: 'file-loader'},
{test: /\.jpeg$/, loader: 'file-loader'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml&name=/[name].[ext]'},
{test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff&name=/[name].[ext]"},
{test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff&name=/[name].[ext]"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream&name=/[name].[ext]"},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?name=/[name].[ext]"}
]
},
plugins:
[
new webpack.DefinePlugin({}) //these are our config settings & are injected in the build script when calling webpack using --define
,new CopyWebpackPlugin([ { from: path.join(srcPath, 'images'), to: 'images' } ]) //copy images to the build folder unchanged
,new HtmlWebpackPlugin({ inject: true, template: path.join(srcPath, 'index.html') }) // this puts our script file into the main html page
,new webpack.NoErrorsPlugin() // don't emit bundles with errors
,new webpack.optimize.CommonsChunkPlugin('lib', '/lib.js') // share common files
,new webpack.optimize.DedupePlugin() // share common files
,new webpack.optimize.AggressiveMergingPlugin()
// ,new webpack.optimize.UglifyJsPlugin({ sourceMap: false, mangle: false, minimize: true, beautify: false, comments: false,}) //Can't get this to work without error, so instead we uglify manually in the build script after webpack has run
]
};
私はこれらのsourcemapsが私node_modulesフォルダから来ると思います。だから、それらを削除するためのハックとして、私はwebpackが完了した後に私の最終出力にこれを実行します:sed -i -e "/#sourceMappingURL = // g" ./app.js – Richard