Webpack 配置目标：“node-webkit”失败并出现未捕获的引用错误：未定义要求

Question

我正在开发一个需要在 nw.js 和浏览器上运行的反应应用程序。这就是为什么我修改了我的 webpack 配置文件，如下所示。

正如您在下面看到的大部分配置文件，我正在使用target: 'node-webkit' 但是我收到了这个错误

Uncaught ReferenceError: require is not defined
    at Object.96 (external "querystring":1)
    at __webpack_require__ (bootstrap 43e7fb751c3d48366505:686)
    at fn (bootstrap 43e7fb751c3d48366505:105)
    at Object.<anonymous> (client.js:14)
    at Object../node_modules/webpack-hot-middleware/client.js?reload=true (client.js:191)
    at __webpack_require__ (bootstrap 43e7fb751c3d48366505:686)
    at fn (bootstrap 43e7fb751c3d48366505:105)
    at Object.97 (main.js:66130)
    at __webpack_require__ (bootstrap 43e7fb751c3d48366505:686)
    at ./app/app.js (bootstrap 43e7fb751c3d48366505:781)

但是，当我设置 target: 'web' 时，它对 fs 或 path 等节点模块的预期效果很好。

那么，我做错了什么？

/**
 * COMMON WEBPACK CONFIGURATION
 */

const path = require('path');
const webpack = require('webpack');

module.exports = (options) => ({
  node: {
    fs: 'empty'
  },
  entry: options.entry,
  output: Object.assign({ // Compile into js/build.js
    path: path.resolve(process.cwd(), 'build'),
    publicPath: '',
  }, options.output), // Merge with env dependent settings
  module: {
    loaders: [{
      test: /\.js$/, // Transform all .js files required somewhere with Babel
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: options.babelQuery,
    }, {
      // Do not transform vendor's CSS with CSS-modules
      // The point is that they remain in global scope.
      // Since we require these CSS files in our JS or CSS files,
      // they will be a part of our compilation either way.
      // So, no need for ExtractTextPlugin here.
      test: /\.css$/,
      include: /node_modules/,
      loaders: ['style-loader', 'css-loader'],
    }, {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader?importLoaders=1&modules&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
        'sass-loader'
      ]
    }, {
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        'less-loader'
      ]
    }, {
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      loader: 'file-loader',
    }, {
      test: /\.(jpg|png|gif)$/,
      loaders: [
        'file-loader',
        {
          loader: 'image-webpack-loader',
          query: {
            progressive: true,
            optimizationLevel: 7,
            interlaced: false,
            pngquant: {
              quality: '65-90',
              speed: 4,
            },
          },
        },
      ],
    }, {
      test: /\.html$/,
      loader: 'html-loader',
    }, {
      test: /\.json$/,
      loader: 'json-loader',
    }, {
      test: /\.(mp4|webm)$/,
      loader: 'url-loader',
      query: {
        limit: 10000,
      },
    }],
  },
  plugins: options.plugins.concat([
    new webpack.ProvidePlugin({
      // make fetch available
      fetch: 'exports-loader?self.fetch!whatwg-fetch',
    }),

    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
    // inside your code for any environment checks; UglifyJS will automatically
    // drop any unreachable code.
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
    new webpack.NamedModulesPlugin(),
  ]),
  resolve: {
    modules: ['app', 'node_modules'],
    alias: { moment: 'moment/moment.js' },
    extensions: [
      '.js',
      '.jsx',
      '.react.js',
    ],
    mainFields: [
      'browser',
      'main',
      'jsnext:main',
    ],
  },
  devtool: options.devtool,
  target: 'node-webkit', // Make web variables accessible to webpack, e.g. window
  performance: options.performance || {},
});

Answer 1

好的，我明白它为什么会发生。因为我是通过 Chrome 调用它的。但由于 chrome 没有 Node.js 引擎，我收到了这个错误。

这里我写的是如何使用nw.js或者electron。

1- 更改 web -> webpack.base.babel.js 中的 node-webkit 2- npm run build:dll && npm start 3- 在 macOS 上我使用这个命令来运行 nw-js

open -n -a /Path/To/nwjs/nwjs.app --args "/Path/To/MyProjectsRoot"

这里详细介绍如何运行nw.js https://github.com/nwjs/nw.js/wiki/how-to-run-apps。