Webpack控制台,日志输出？

slmsl1lt 于 2023-04-30 发布在 Webpack

关注(0)|答案(3)|浏览(561)

有人能给我指个方向吗？
所以我用truffle suite demo设置了webpack-dev-server，只是为了在我的应用程序的基础上打下基础。所以我的配置文件包括索引。html & app.js，但它试图显示控制台。从应用程序记录输出。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//上查看，但没有运气。

webpack

来源：https://stackoverflow.com/questions/48322931/webpack-console-log-output

3条答案

按热度按时间

rjzwgtxy1#

我也有同样的问题。据我所知，问题是Webpack实际上并没有在服务器上运行生成的代码。在服务器上运行的进程只是检查文件更改并在必要时重新编译。代码实际上都在客户端上运行。所以，从控制台查看输出的唯一方法。log（）用于查看客户端浏览器的控制台。
这里的部分困惑在于，虽然node通常在服务器上运行javascript，但在这种情况下，node完全委托给了一个单独的程序。您可以在根本不安装node的情况下运行整个过程，只需要使用webpack可执行文件的独立安装即可。Node的执行环境从未使用过，因此您无法登录到它。

赞(0）回复(0）举报 2023-04-30

p1iqtdky2#

由于您使用的是webpack-dev-server，因此console.log将被打印到浏览器控制台中。如果你想在你的终端中看到console.log打印，你可以在webpack.config文件中添加一个console.log。
如果你没有提供webpack-dev-server端口，你的应用应该在80上运行，所以打开浏览器并打开浏览器控制台，你应该能够看到"starting!日志。

赞(0）回复(0）举报 2023-04-30

vh0rcniy3#

好问题，这取决于你使用的优化器和捆绑引擎。
TerserJS（最有可能，最新，方法）：

optimization: {
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        compress: {
            drop_console: true
        }
      }
    })
  ]
}

旧方法uglifyJsPlugin：

// under plugins
            new webpack.optimize.UglifyJsPlugin({

                // Eliminate comments
                   comments: false,
           
               // Compression specific options
                  compress: {
                    // remove warnings
                       warnings: false,
           
                    // Drop console statements
                       drop_console: false
                  },
               }),

或在优化webpack v4下进行丑化：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
// load the plugin. its not part of webpack

optimization: {
  minimizer: [
    new UglifyJSPlugin({
      uglifyOptions: {
        compress: {
          drop_console: true,
        }
      }
    })
  ]
}

赞(0）回复(0）举报 2023-04-30

我来回答

Webpack控制台,日志输出？

3条答案

相关问题

热门标签

最新问答