Webpack Express無法解析模塊“ fs”，請求依賴關系為表達式

Question

當我在項目中包含Express時，當我嘗試使用webpack進行構建時，總是會遇到這些錯誤。

webpack.config.dev.js

var path = require("path")

module.exports = {
  entry: {
    "server": "./server/server.ts"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/public/"
  },
  module: {
    loaders: [
      {
        test: /\.ts(x?)$/,
        exclude: /node_modules/,
        loader: "ts-loader"
      }, {
        test: /\.js(x?)$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }, {
        test: /\.json$/,
        loader: "json-loader"
      }, {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ["style-loader", "css-loader", "postcss-loader", "sass-loader"]
      }, {
        test: /\.css$/,
        loader: ["style-loader", "css-loader", "postcss-loader"]
      }, {
        test: /\.(jpe?g|gif|png|svg)$/i,
        loader: 'url-loader?limit=10000'
      }
    ]
  }
}

我試過了：

1. 安裝“ fs”，但不起作用

2. 閱讀某處以更改節點fs屬性。 它消除了錯誤警告，但是我認為這不是一個很好的永久解決方案。

    module.exports = { node: { fs: "empty" } } 

   時間：2496ms資產大小塊塊名稱bundle.js 761 kB 0 [已發出]服務器bundle.js.map 956 kB 0 [已發出]服務器+ 119個隱藏模塊

   ./~/express/lib/view.js中的警告關鍵依賴項：78：29-56依賴項的請求是一個表達式@ ./~/express/lib/view.js 78：29-56 ./中的錯誤〜/ express / lib / view.js

   找不到模塊：錯誤：無法解析/ Users / clementoh / Desktop / boilerplate2 / node_modules / express / lib @ ./~/express/lib/view.js中的模塊'fs'18：9-22 ./~/中的錯誤發送/ index.js

   找不到模塊：錯誤：無法解析/ Users / clementoh / Desktop / boilerplate2 / node_modules / send @ ./~/send/index.js中的模塊'fs'24：9-22 ./~/etag/index中的錯誤。 js

   找不到模塊：錯誤：無法解析/ Users / clementoh / Desktop / boilerplate2 / node_modules / etag @ ./~/etag/index.js 22：12-25中的模塊'fs'./~/destroy/index中的錯誤。 js

   找不到模塊：錯誤：無法解析/ Users / clementoh / Desktop / boilerplate2 / node_modules / destroy @ ./~/destroy/index.js中的模塊'fs'14：17-30 ./~/mime/mime中的錯誤。 js

   找不到模塊：錯誤：無法解析/ Users / clementoh / Desktop / boilerplate2 / node_modules / mime @中的模塊'fs'。/〜/ mime / mime.js 2：9-22

Answer 1

只是發布答案，因為不是每個人都閱讀有關SO的評論。 @ Aurora0001釘了它。 Webpack的配置需要進行以下設置：

"target": "node"

Answer 2

我在堆棧Angular 2-Electron-Webpack上，我需要在服務中使用fs，我終於找到了怎么做：

1）在您的webpack.common.js中，指定target:'electron-renderer'

2）在您的服務或組件內部： import * as fs from 'fs'; 並像對節點項目那樣使用fs。

希望對您有所幫助！

Answer 3

我通過兩個步驟解決了這個問題：

1. 刪除node_modules目錄

2. 將target:'node'添加到webpack配置文件中

然后運行npm install 。 對我來說很好。

Answer 4

我添加了node: { fs: 'empty' }沒有運氣，

然后我添加了--config來啟動命令：

webpack-dev-sever webpack.config.dev.js

使用--config標志使用自定義文件。

webpack-dev-sever --config webpack.config.dev.js

Answer 5

Angular V6及更高版本的工作解決方案/缺陷/補丁

對我來說，解決方案是破解Angular-CLI模塊，以欺騙丟失的節點模塊。

安裝后，找到以下文件：

node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js

找到node行並添加以下內容：

node: { crypto: true, stream: true, fs: 'empty', net: 'empty' }

就是這樣！！！

🎉🎉🎉🎉🎉

注意：每次更新軟件包時，都需要執行此補丁程序。 因此，使用以下腳本：

package.json

"scripts": {
  ...
  "postinstall": "node patch-webpack.js"
  ...
}

patch-webpack.js

const fs = require('fs');
const f = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';

fs.readFile(f, 'utf8', function (err,data) {
  if (err) {
    return console.log(err);
  }
  let result = data.replace(/node: false/g, "node: {crypto: true, stream: true, fs: 'empty', net: 'empty'}");

  fs.writeFile(f, result, 'utf8', function (err) {
    if (err) return console.log(err);
  });
});

來源： https ： //blog.lysender.com/2018/07/angular-6-cannot-resolve-crypto-fs-net-path-stream-when-building-angular/

Answer 6

添加"target": "node",是將其添加到webpack.config.js 。