Webpackを使用してJavaScriptプロジェクトを構築すると、コンソールから自分のコードにアクセスできません。

Question

私はWebpack（投稿時点で2.2.1）から始めています。しかし、今朝私はWebpackのセットアップを使って新しいプロジェクトを構築し始めました。私が書いたJSはすべてビルドされていてブラウザで正常に動作していますが、私が書いたコードにはアクセスできないようですコンソールで

最も簡単な例として、私のindex.jsに、私は次のことを持っているかもしれません：

const thing = "Why can't you see me?!";

私は私のブラウザ（クローム57.0.2987.110）に建てられたページを開くと、コンソールを開くと、タイピング「事は」私に次のエラーを与える：

Uncaught ReferenceError: thing is not defined at <anonymous>:1:1

バベルによって強制されているstrictモードに何かあるかもしれない場合、私は思っていたが、それであれば、私は迂回するかどうかはわかりませんthで。

これは私のwebpack.configです。もしこの問題に関連しているかどうかに関わらず、これに目障りなエラーがあっても、私はまだ頭を折っているので、フィードバックを歓迎します。ウェブパックの周り。

const webpack = require('webpack'); 
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: { 
     bundle: path.resolve(__dirname, 'src/js/') 
    }, 
    output: { 
     path: path.join(__dirname, 'dist/'), 
     filename: '[name].[chunkhash].js' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       use: ['babel-loader', 'eslint-loader'], 
       exclude: '/node_modules/' 
      }, 
      { 
       test: /\.(scss|sass)$/, 
       use: ExtractTextPlugin.extract({ 
        use: ['css-loader', 'sass-loader'] 
       }) 
      } 
     ] 
    }, 
    devServer: { 
     contentBase: path.join(__dirname, 'dist'), 
     port: 3500 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: ('src/index.html') 
     }), 
     new ExtractTextPlugin('style.css'), 
     new webpack.optimize.UglifyJsPlugin({}), 
    ] 
}; 

Answer 1

bundle.jsファイルを開くと、Webpackモジュールによってラップされたコードがどのように機能するかがわかります。そのスコープはその関数によって制限され、グローバルスコープからアクセスすることはできません。

1. 本当に必要な場合は、この変数をウィンドウオブジェクトに割り当てることができます。
2. const変数を使って別のファイルを作成し、エクスポートすることができます。次にインポートするか、どこかで必要とします。
3. あなたはグローバル変数として図書館がそれ `window.thing =もので、公共の試み作るために、匿名関数の内部でそれを構築、多分それを梱包がhttps://webpack.github.io/docs/library-and-externals.html

Answer 2

あなたはsource mapsを調べたいと思うでしょう。ソースマップがソースコードを指すように、ブラウザはコンパイルされたコードを実行しています。いくつかのdevtoolオプションがあり、コンパイル速度と精度の間にトレードオフがあります。より正確なデバッグが必要な場合は、通常のdevの場合はcheap-eval-source-map、eval-source-mapの場合はお勧めします。

ソースにdebuggerとconsole.log()ステートメントをドロップし、いつものようにブラウザでデバッグすることができます。ブレークポイントを元の行に戻す方法がないため、ブラウザコンソールにブレークポイントを設定することはできません。