web-dev-qa-db-ja.com

モジュールが見つかりません：エラー：Webpackを使用して 'fs'を解決できません

こんにちは私は私のアプリケーションでソケットioを使用しています。これはfsを必要とします。以下のwebpack構成を使用してjavascriptをバンドルしようとすると、エラーが発生したimは '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 node -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.jssasswebpack-3webpack-file-loader
7
harish511

Fs（npm i fs）をインストールし、webpack設定に追加するだけです

externals: ["fs"],
2
Max Sherbakov

ソリューションは、構築するアプリケーションのタイプによって異なります。通常、フロントエンドとバックエンドのJavaScriptコードを別々にバンドルして、2つの出力バンドルを効率的に作成します。

フロントエンドプロジェクト/ウェブアプリの場合、 socket.io client ライブラリをアプリバンドルに追加します（fsなどのノードの依存関係はありません）。 target:'web 'を選択するか、デフォルトなのでそのままにします。また、node:{fs:'empty'}でモックする必要もありません。

アプリケーションのバックエンド部分を作成する場合は、 target:'node' を選択して socket.io server ライブラリをインストールします。他の回答に示すようにexternals: ["fs"]を指定する必要はありません。target: 'node'がそれを処理し、パスやfsなどの組み込みモジュールをバンドルしないためです。実際にnpm i fsを実行する必要はありません。これは非常に見苦しいパターンであり、一般的なパッケージ名を持つ悪意のあるパッケージの場合もあります。

ノードバックエンドをバンドルする必要がある場合は、自分で質問することもできます。これを行う場合は、たとえば webpack-node-externals のようなパッケージをインストールできます。これにより、すべて（デフォルト）または特定のnpmパッケージが "externals" として扱われます。 =およびそれらをバンドルから除外します。バックエンドに関しては、サーバーを起動するとすべての依存関係が./node_modulesフォルダーにインストールされるので、バンドルに含める必要はありません。

変換する特定のローダーから一部のファイルを除外する必要がある場合は、意図した モジュール除外ルール を使用できます。たとえば、node_modulesフォルダをbabel-loader変換から除外します。

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

私があなたにお勧めできる良い関連記事は フロントエンドとバックエンドの両方のためのWebpack Javascriptバンドル（nodejs） です。

ここに遅れているので、それでも少し明確になることを願っています。

0
ford04