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 。