Help us understand the problem. What is going on with this article?

webpack 実行で Module not found: Error: Can't resolve 'fs' というエラー

More than 1 year has passed since last update.

概要

まずはこのエラーを見て欲しい

Module not found: Error: Can't resolve 'fs'

'fs' の部分は実に様々な内容に変わる

今日はこのエラーと向き合う

前提

node.js とかでフロントエンドとかバックエンドとか書いてて
トランスパイラ(babelとか)とモジュールバンドラ(webpackとか)の組み合わせで
開発する機会ってあると思うんだけど、
こいつらが何をしてるか?何が目的か?メリットは?デメリットは?って理解してないと
エラーが出た時焦るよな

ほんで今回はこのエラー、ぱっと見はすごく厄介そう

エラーを理解してないと間違った対処して、
babelやwebpackの恩恵を受けられていないことに気付けなくなる

この対処法は違う(と思うんだ)

fs: "empty" は間違い

この対応は臭いものに蓋をしているだけ
目を瞑ってる
根本的に何も解決できていないと思うんだ
もうちょっというと、自分で不具合の種を仕込んでる

私はこのコードがどう動いているかは理解できない

webpack.config.js
node: {
    fs: "empty"
}

さらに、Angularとかだとwebpackとか意識せずに勝手にやってくれてる!みたいなイメージの人も多いと思う
webpack.config.js がないケースとかね

だからといって、
力技でpackage.json とかに書いちゃうのも違う気がする
だって、このコード違和感ない?

package.json
"browser": {
    "fs": false
}

target: 'node' は理解していないと危ない

ちゃんとしたドキュメントに書いてある対処法
https://jlongster.com/Backend-Apps-with-Webpack--Part-I

webpack.config.js
var path = require('path');

module.exports = {
  entry: './src/main.js',
  target: 'node',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'backend.js'
  }
}

でも、target: 'node'って書くからにはなぜ、target: 'node'と書くと動くのか?を理解しておいてもらいたい

バックエンドならいいと思う
だって、node.jsで書いてるんだよな?
だから、target: 'node' は正しい

なぜこう書くか?を理解できているならこれでいいと思う

こうじゃないか?

ここが重要
externals: nodeModules

これなら、fs: "empty" なんていう危険なコード仕込まなくたっていい
target: 'node' なんて決めつけなくていい

webpack.config.js
var webpack = require('webpack');
var path = require('path');
var fs = require('fs');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'backend.js'
  },
  externals: nodeModules
}
kenboo
.NET系 -> 色んな火消し -> web front-end -> web back-end -> IoT -> Kotlin(Server side) -> 請負業務なんでも、なんでもやります。
http://www.abi-sol.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした