web-dev-qa-db-fra.com

Module introuvable: Erreur: impossible de résoudre «fs» à l'aide de Webpack

Salut, j'utilise socket io dans mon application. Ce qui nécessite fs. lorsque j'essaie de regrouper mon javascript en utilisant la configuration Webpack ci-dessous. im obtenir une erreur ne peut pas résoudre "fs".

Module not found: Error: Can't resolve 'fs' in 'my application path/node_modules/socket.io/lib'

j'ai trouvé en ajoutant target:'node' et node:{fs:'empty'}. ce problème a été résolu.

Mais il y a un problème avec sass-loader. Obtention en dessous de l'erreur.

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

exécution de l'application en ignorant l'erreur ci-dessus. descendre en dessous de l'erreur.

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)

Ci-dessous ma configuration et mes versions de webpack. Quelqu'un peut-il m'aider à résoudre ce problème?.

"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

Installez simplement fs (npm i fs) et ajoutez-le à votre configuration webpack

externals: ["fs"],
2
Max Sherbakov

Votre solution dépend du type d'application que vous souhaitez créer. Normalement, vous regroupez le code JavaScript frontal et principal séparément, créant efficacement 2 bundles de sortie.

Pour un projet frontend/application web, ajoutez le client socket.io libary à votre bundle d'application (pas de dépendances de noeud comme fs). Choisissez target:'web 'ou laissez-le de côté, car c'est la valeur par défaut. De plus, il n'est pas nécessaire de se moquer de node:{fs:'empty'}.

Si vous créez la partie backend de l'application, choisissez target:'node' et installez la bibliothèque du serveur socket.io . Vous n'avez pas besoin de spécifier externals: ["fs"] comme indiqué dans l'autre réponse, comme target: 'node' s'en chargera et ne regroupera pas les modules intégrés comme path, fs, etc. Il n'y a vraiment pas besoin de faire npm i fs- c'est un modèle très moche et il s'est également produit des cas de paquets malveillants avec des noms de paquets communs.

Vous pouvez même vous poser la question, si vous avez besoin de regrouper le backend du nœud. Si vous voulez le faire, vous pouvez installer un package comme webpack-node-externals par exemple, qui traite tous (c'est la valeur par défaut) ou les packages npm spécifiques comme "externes" et exclut les du paquet. Cela a du sens, comme pour le back-end, toutes les dépendances sont installées dans votre ./node_modules dossier lorsque vous démarrez le serveur, il n'est donc pas nécessaire de les inclure dans le bundle.

S'il doit être nécessaire d'exclure certains fichiers de certains chargeurs à transformer, vous pouvez utiliser la règle d'exclusion de module prévue . Par exemple, excluez node_modules dossier de babel-loader transformations:

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

Un bon article connexe que je peux vous recommander est Bundle Javascript Webpack pour les deux front-end et back-end (nodejs) .

Être en retard ici, j'espère, que cela clarifie quand même un peu les choses.

0
ford04