2016-09-08 1 views
0

На скриншоте ниже вы можете увидеть, что наш сайт загружает два основных файла .js - app & lib. Наши .js файлы создаются webpack и выводятся для производства без //# sourceMappingURL=/path/to/script.js внизу. Также нет заголовка, который возвращается X-SourceMap: /path/to/script.js.map.Почему веб-пакет говорит, что он создал исходную карту, если она не имеет?

Так почему же Chrome выдает консольную ошибку о попытке получить исходные карты?

И что такое index.js? У нас даже нет этого файла на нашем сайте.

Наш сайт является сервером узла узла http-server в контейнере Docker, обслуживаемом nginx.

enter image description here


Update

Ответ Дерека ниже показывает, что WebPack по сути добавил #sourcemap комментарий к нашей выходной файл, даже если он не произвел sourcemap, и не было он попросил его создать.

Так почему же 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 
    ] 
}; 
+0

Я думаю, что эти sourcemaps приходят из моих node_modules папок. Так как взломать их, я запускаю это на своем окончательном выходе после завершения webpack: sed -i -e "s/# sourceMappingURL = // g" ./app.js – Richard

ответ

1

Он загружается, что потому, что ваш файл содержит sourceMappingURL:

enter image description here

+0

Спасибо Derek! Я прикрепил наш файл в Интернете. Мы не упоминаем об источниках. Зачем это попробовать? – Richard

+0

@ Рихард Я понятия не имею. Согласно документам он не должен включать исходные карты, если вы не установили 'devtool' в' source-map'. –

Смежные вопросы