Webpack console.log 输出？答案

【问题标题】：Webpack console.log output?Webpack console.log 输出？
【发布时间】：2018-06-27 14:55:56
【问题描述】：

谁能指引我正确的方向？

所以我用 truffle 套件演示设置了 webpack-dev-server，只是为了在我的应用程序的基础上打下基础。所以我的配置文件包含 index.html 和 app.js，但它试图显示一个 console.log 输出到 app.js 没有通过控制台显示？

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// 观看，但没有运气。

【问题讨论】：

请提供minimal reproducible example。
它与手头的问题无关？
app.js 编写的代码不会被 webpack 执行，它会解析相同的内容并应用一些转换。 Webpack 为其内部提供了一些接口，这就是插件在 webpack 中的工作方式。使用此接口，您可以在 webpack 执行其解析和编译步骤时执行自定义代码（在您的情况下为 console.log）。 github.com/webpack/docs/wiki/plugins
我不明白你为什么期望你的app.js 由webpack 工作。你必须使用不同的方式。
在 webpack.config.js 文件中添加你的 console.log()，你会在终端输出中看到它

标签： javascript webpack output webpack-dev-server console.log

【解决方案1】：

我遇到了同样的问题。据我所知，问题在于 Webpack 实际上并没有在服务器上运行生成的代码。在服务器上运行的进程只是检查文件更改并在必要时重新编译。代码实际上都是在客户端上运行的。因此，查看 console.log() 输出的唯一方法是查看客户端浏览器的控制台。

这里的部分困惑是，虽然通常节点在服务器上运行 javascript，但在这种情况下，节点完全委托给一个单独的程序。您可以在完全不安装节点的情况下运行这整个过程，只需使用 webpack 可执行文件的独立安装即可。 Node的执行环境从未使用过，因此您无法登录。

【讨论】：

【解决方案2】：

由于您使用的是webpack-dev-server，因此console.log 将被打印到浏览器控制台中。如果你想在终端中看到console.log，可以在webpack.config 文件中添加console.log。

如果您没有提供 webpack-dev-server 端口，您的应用应该在 80 上运行，因此打开浏览器并打开浏览器控制台，您应该能够看到 "starting! 日志。

【讨论】：