Chromeの[ソース]タブの反応アプリ全体が表示されるのはなぜですか

Question

Google Chromeの[ソース]タブに自分の反応アプリ（ディレクトリとファイル名が同じ）が表示されます。

なぜそうですか？私は両方のDEVと生産でこれを試してみました

：

devに：

npm start 

PROD：

yarn global add serve 
serve -s build 

を私は、ルーティング/レンダリングロジック、アーキテクチャ全体やファイルを見ることができます。

私は間違っていることがあるのでしょうか、あるいは反応サーバーがどのように返ってくるかを説明できますか？

Answer 1

まず、実際にプロダクションビルドを構築していることを確認します。

"build": "NODE_ENV=production webpack -p;", 

webpackでエラーは発生していませんが、実際にはそれを縮小しませんでした。

また、誰かがChromeで反応開発ツールを使用している場合は、「青の制作ビルド」のロゴを表示するために、すべてのコードをコンピュータのみで読み取り可能にするために、制作ビルドをuglify（）する必要があります。私はあなたが探していると思う。ここで

https://webpack.js.org/plugins/uglifyjs-webpack-plugin/

私が使用WebPACKのコンフィグレーションの例です。明らかにあなたが必要としないものがあります。

'use strict'; 

require('dotenv').config({ path: `${__dirname}/src/.dev.env` }); 
const production = process.env.NODE_ENV === 'production'; 

const { DefinePlugin, EnvironmentPlugin } = require('webpack'); 
const HtmlPlugin = require('html-webpack-plugin'); 
const CleanPlugin = require('clean-webpack-plugin'); 
const UglifyPlugin = require('uglifyjs-webpack-plugin'); 
const ExtractPlugin = require('extract-text-webpack-plugin'); 

let plugins = [ 
    new EnvironmentPlugin(['NODE_ENV']), 
    new ExtractPlugin('bundle-[hash].css'), 
    new HtmlPlugin({ template: `${__dirname}/src/index.html` }), 
    new DefinePlugin({ 
    __DEBUG__: JSON.stringify(!production), 
    __API_URL__: JSON.stringify(process.env.API_URL), 
    __GOOGLE_CLIENT_ID__: JSON.stringify(process.env.GOOGLE_CLIENT_ID), 
    __AWS_ACCESS_KEY_ID__: JSON.stringify(process.env.AWS_ACCESS_KEY_ID), 
    __AWS_SECRET_ACCESS_KEY__: JSON.stringify(process.env.AWS_SECRET_ACCESS_KEY), 
    }), 
]; 

if(production) { 
    plugins = plugins.concat([new CleanPlugin(), new UglifyPlugin()]); 
} 

module.exports = { 
    plugins, 
    entry: `${__dirname}/src/main.js`, 
    devServer: { 
    historyApiFallback: true, 
    }, 
    devtool: production ? undefined : 'eval', 
    output: { 
    path: `${__dirname}/build`, 
    filename: 'bundle-[hash].js', 
    publicPath: process.env.CDN_URL, 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     }, 
     { 
     test: /\.scss$/, 
     loader: ExtractPlugin.extract(['css-loader', 'sass-loader']), 
     }, 
     { 
     test: /\.(woff|woff2|ttf|eot|glyph|\.svg)$/, 
     use: [ 
      { 
      loader: 'url-loader', 
      options: { 
       limit: 10000, 
       name: 'font/[name].[ext]', 
      }, 
      }, 
     ], 
     }, 
     { 
     test: /\.(jpg|jpeg|gif|png|tiff|svg)$/, 
     exclude: /\.glyph.svg/, 
     use: [ 
      { 
      loader: 'url-loader', 
      options: { 
       limit: 6000, 
       name: 'image/[name].[ext]', 
      }, 
      }, 
     ], 
     }, 
     { 
     test: /\.(mp3|aac|aiff|wav|flac|m4a|mp4|ogg)$/, 
     exclude: /\.glyph.svg/, 
     use: [ 
      { 
      loader: 'file-loader', 
      options: { name: 'audio/[name].[ext]' }, 
      }, 
     ], 
     }, 
    ], 
    }, 
};