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

问题描述 投票：0回答：4

嗨，我在我的应用程序中使用套接字 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;
node.js webpack sass webpack-file-loader
4个回答
9
投票

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

前端

对于前端/Web 项目，请将 socket.io 客户端 库添加到您的应用程序包中。无需包含任何节点依赖项 (

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 包视为 “外部” 并将它们从捆绑包中排除：

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
模块规则。一个例子是从 
node_modules
转换中省略 
babel-loader
：

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

进一步阅读

2
投票

只需安装 fs (npm i fs)，并添加到您的 webpack 配置中

externals: ["fs"],
1
投票

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

node: {
    fs: 'empty',
}

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

4.0.0
和 
4.2.0
。

0
投票

我试图安装一个名为cornerstone3D的节点模块。 我必须将以下内容添加到我的

webpack.config.js

resolve: {
    fallback: {
      "fs": false, // Can't resolve 'fs' in ... node_modules\@cornerstonejs\codec-openjph\dist
    }
  },

我的

package.json

{
  "name": "",
  "version": "1.0.0",
  "keywords": [""],
  "author": "Me",
  "scripts": {
    "start": "webpack serve --open --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "@cornerstonejs/core": "^2.1.17",
    "@cornerstonejs/dicom-image-loader": "^2.1.17",
    "@cornerstonejs/nifti-volume-loader": "^2.1.17",
    "@cornerstonejs/streaming-image-volume-loader": "^1.86.0",
    "@cornerstonejs/tools": "^2.1.17",
    "@icr/polyseg-wasm": "^0.4.0",
    "path": "^0.12.7",
    "wasm-loader": "^1.3.0"
  },
  "devDependencies": {
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.1.0"
  }
}

还有我的

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'inline-source-map',
  devServer: {
    static: path.join(__dirname, 'dist'),
    compress: true,
    host: 'localhost',
    port: 8081,
    client: {overlay: false,}, // to disable the error overlay
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Cross-Origin-Embedder-Policy": "require-corp",
      "Cross-Origin-Opener-Policy": "same-origin",  
      "Cross-Origin-Resource-Policy": "cross-origin", 
    },
  },
  module: {
    rules: [
      {
        test: /\.wasm$/,
        use: ['wasm-loader'], //to deal with ERROR in ./node_modules/@icr/polyseg-wasm/dist/ICRPolySeg.wasm 1:0
        type: 'javascript/auto',
      },
    ],
    unknownContextCritical: false,
  },
  resolve: {
    fallback: {
      "fs": false, // Can't resolve 'fs' in ... node_modules\@cornerstonejs\codec-openjph\dist
    }
  },
};
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.