node.js - 找不到模块 : Error: Can't resolve 'fs' Using Webpack

Question

您好，我在我的应用程序中使用套接字 io。这需要 fs。当我尝试使用以下 webpack 配置捆绑我的 javascript 时。我收到错误无法解析“fs”。

Module not found: Error: Can't resolve 'fs' in 'my application path/node_modules/socket.io/lib'

我通过添加 target:'node' 和 node:{fs:'empty'} 找到了。这个问题得到解决。

但是 sass-loader 有一个问题。出现以下错误。

ERROR in javascript/bundle.js from UglifyJs
Unexpected token: name (zlibLimiter) [javascript/bundle.js:60019,4]
Child extract-text-webpack-plugin ../../../node_modules/extract-text-webpack-plugin/dist ../../../node_modules/css-loader/index.js??ref--2-2!../../../node_modules/sass-loader/lib/loader.js!s

忽略上述错误运行应用程序。低于错误。

external "crypto":1 Uncaught ReferenceError: require is not defined
    at Object.__decorate (external "crypto":1)
    at __webpack_require__ (bootstrap 93620a17882f7a2aa1d3:19)
    at Object.byteToHex (rng.js:4)
    at __webpack_require__ (bootstrap 93620a17882f7a2aa1d3:19)

下面是我的 webpack 配置和版本。有人可以帮我解决这个问题吗。

"webpack": "~3.6.0",npm -v 5.8.0 Node -v v8.4.0

const webpack = require('webpack');
const env = process.env.NODE_ENV;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const extractSass = new ExtractTextPlugin({
  filename: 'css/[name].css',
  allChunks: false
});


let output = {
  path: __dirname + '/src/main/resources/static/',
  filename: 'javascript/[name].js'
};

if (env === 'debug' || env === 'nondev') {
  output = {
    path: __dirname + '/target/classes/static/',
    filename: 'javascript/[name].js'
  };
}

let config = {
  context: __dirname + '/app/js/src',
  entry: {
    bundle: './index.jsx',
    application: './static/scss/application.scss',
    'application-pdap': './static/scss/application-pdap.scss'
  },
  output: output,
  devtool: 'cheap-module-source-map',
  module: {
    rules: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {presets: ['es2015', 'react']}
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg|png|jpg|gif)$/,
        loader: 'file-loader?limit=1024&name=images/[name].[ext]'
      },
      {
        test: /\.(scss|css)$/,
        include: [path.resolve(__dirname, 'app/js/src/static/scss')],
        use: ExtractTextPlugin.extract({
          publicPath: '../',
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: true,
                sourceMap: false
              }
            },
            {loader: 'sass-loader'}
          ],
          fallback: 'style-loader'
        })
      }
    ]
  },
  plugins: [extractSass],

};

if (env === 'production' || env === 'nondev') {
  config.devtool = 'nosources-source-map';

  config.plugins.push(
    new webpack.DefinePlugin({
      'process.env': {NODE_ENV: '"production"'}
    })
  );

  config.plugins.push(new webpack.optimize.UglifyJsPlugin({
    compress: {warnings: false},
    comments: false,
    sourceMap: false,
    minimize: false
  }));
}

module.exports = config;

Answer 1

解决方案取决于您要构建的应用程序类型。通常前端和后端 JavaScript 代码分别捆绑，有效地创建两个输出包。

前端

对于前端/网络项目，添加 socket.io client库到您的应用程序包。无需包含任何 Node 依赖项 (fs) 或模拟条目，例如 node: { fs:'empty' }。您可以选择 target:'web' 或将其保留，因为它是默认设置。

后端

选择 target:'node'并安装 socket.io server图书馆。您不需要指定 externals: ["fs"] 如另一个答案所示，因为 target: 'node' 会处理不捆绑 path 、fs等内置模块。

最好避免使用 npm i fs - 这是不必要的逃生 channel 和安全风险。已经发生过使用通用包名的恶意 npm 包的案例。

您甚至可以考虑是否需要 Node 后端包。另一种方法是安装 webpack-node-externals ，它将所有或特定的 npm 包视为 "externals"并将它们从包中排除:

var nodeExternals = require('webpack-node-externals');

module.exports = {
  target: 'node', // ignore built-in modules like path, fs, etc.
  externals: [nodeExternals()], // ignore all modules in node_modules folder
  // ...
};

这对后端来说很有意义，因为所有依赖项都在服务器启动时安装在 node_modules 中，不需要包含在包中。

从加载器中排除文件

要从某些加载器及其转换中排除文件，您可以使用 exclude模块规则。一个示例是从 babel-loader 转换中省略 node_modules:

{ test: /\.(jsx|js)$/, exclude: /node_modules/, loader: "babel-loader" }

Further reading