未找到模块：错误：无法使用 Webpack 解析“fs”

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 节点 -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 代码是分开打包的，有效地创建了两个输出包。

前端

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

后端

选择target:'node' 并安装socket.io server 库。您不需要指定externals: ["fs"]，如另一个答案所示，因为target: 'node' 将负责不捆绑path、fs 和其他内置模块。

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

您甚至可以考虑是否需要一个节点后端包。另一种方法是安装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

Answer 2

只需安装 fs (npm i fs)，然后在你的 webpack 配置中添加

externals: ["fs"],

Answer 3

如果有人仍然遇到此问题，您可以尝试以下解决方法。更新您的 webpack 文件以包含以下配置：

node: {
    fs: 'empty',
}

我们在项目中遇到了类似的问题，添加此特定配置解决了 webpack 中与“fs”相关的错误。 还值得检查 Webpack 版本的版本。我们不得不将 webpack 和 webpack cli 版本分别恢复为 4.0.0 和 4.2.0。