web-dev-qa-db-ja.com

Webpack console.logの出力？

誰かが正しい方向に私を導くことができますか？

それで、私のアプリの基礎の基礎を得るために、トリュフスイートデモでwebpack-dev-serverをセットアップしました。私の設定ファイルにはindex.htmlとapp.jsが含まれていますが、app.jsからconsole.log出力を表示しようとしていますが、コンソールには何も表示されませんか？

webpack.config.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports =
  {
  entry: './app/javascripts/app.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'app.js',
  },
  plugins: [
    // Copy our app's index.html to the build folder.
    new CopyWebpackPlugin([
      { from: './app/index.html', to: "index.html" }
    ])
  ],
  module: {
    rules: [
      {
       test: /\.css$/,
       use: [ 'style-loader', 'css-loader' ]
      }
    ],
    loaders: [
      { test: /\.json$/, use: 'json-loader' },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
          plugins: ['transform-runtime']
        }
      }
    ]
  },
devServer: {
        compress: true,
        disableHostCheck: true,   // That solved .
        quiet: false,
        noInfo: false,
stats: {
  // Config for minimal console.log mess.
  colors: true,
  version: false,
  hash: false,
  timings: false,
  chunks: false,
  chunkModules: false

        }
 }
}

app.js

// Import libraries we need.
import { default as Web3} from 'web3';
import { default as contract } from 'truffle-contract'

// Import our contract artifacts and turn them into usable abstractions.
import metacoin_artifacts from '../../build/contracts/MetaCoin.json'
import dextre_artifacts from '../../build/contracts/Dextre.json'

console.log("starting!");

Webpackを実行したときの出力

Project is running at http://localhost:8080/
webpack output is served from /
     Asset     Size  Chunks                    Chunk Names
    app.js  1.93 MB       0  [emitted]  [big]  main
index.html  19.8 kB          [emitted]         
webpack: Compiled successfully.

「開始！」を表示できる場所出力、これは私がエラーに取り組む必要があるので、本当に迷惑です。 http：// localhost：8080 // および http：// localhost：8080/webpack-dev-server // で表示しようとしましたが、運はありません。

javascriptwebpackoutputwebpack-dev-serverconsole.log
8
Samuel Gosling

同じ問題がありました。私が知る限り、問題はWebpackが実際にサーバーで生成されたコードを実行しないことです。サーバーで実行されるプロセスは、ファイルの変更をチェックし、必要に応じて再コンパイルします。コードは実際にはすべてクライアントで実行されています。そのため、console.log（）からの出力を表示する唯一の方法は、クライアントブラウザのコンソールを表示することです。

ここでの混乱の一部は、通常、ノードはサーバー上でjavascriptを実行しますが、この場合、ノードは完全に別のプログラムに委任します。 webpack実行可能ファイルのスタンドアロンインストールを使用するだけで、ノードをまったくインストールせずにこのすべてを実行できます。ノードの実行環境は使用されないため、ログに記録できません。

1
nupanick