web-dev-qa-db-fra.com

Webpack avec requirejs / AMD

Je travaille sur un nouveau module pour un projet existant qui utilise toujours requireJS pour le chargement du module. J'essaie d'utiliser de nouvelles technologies pour mon nouveau module comme webpack (qui me permet d'utiliser des chargeurs es6 en utilisant les importations es6). Il semble que le webpack ne puisse pas se réconcilier avec la syntaxe requireJS. Il dira des choses comme: "Module introuvable: Erreur: impossible de résoudre en".

Problème: Webpack ne regroupera pas les fichiers contenant la syntaxe requireJS/AMD.
Question: Existe-t-il un moyen de faire jouer le webpack avec Nice avec requireJS?

Ma sortie finale doit être au format AMD pour que le projet la charge correctement. Merci.

javascriptwebpackrequirejsfrontendamd
9
goldensausage

J'avais la même question et j'ai réussi à la réaliser. Ci-dessous est le même webpack.config.js fichier.

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

let basePath = path.join(__dirname, '/');

let config = {
  // Entry, file to be bundled
  entry: {
    'main': basePath +  '/src/main.js',
  },
  devtool: 'source-map',
  output: {
    // Output directory
    path: basePath +  '/dist/',
    library: '[name]',
    // [hash:6] with add a SHA based on file changes if the env is build
    filename: env === EnvEnum.BUILD ? '[name]-[hash:6].min.js' : '[name].min.js',
    libraryTarget: 'AMD',
    umdNamedDefine: true
  },
  module: {
    rules: [{
      test: /(\.js)$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        // babel-loader to convert ES6 code to ES5 + amdCleaning requirejs code into simple JS code, taking care of modules to load as desired
        loader: 'babel-loader',
        options: {
          presets: ['es2015'],
          plugins: []
        }
      }
    }, { test: /jQuery/, loader: 'expose-loader?$' }, 
  { test: /application/, loader: 'expose-loader?application' },
  { test: /base64/, loader: 'exports-loader?Base64' }
    ]
  },
  resolve: {
    alias: {
        'jQuery': 'bower_components/jquery/dist/jquery.min',
        'application': 'main',
        'base64': 'vendor/base64'
    },
    modules: [
      // Files path which will be referenced while bundling
      'src/**/*.js',
      'src/bower_components',
      path.resolve('./src')
    ],
    extensions: ['.js'] // File types
  },
  plugins: [

  ]
};

module.exports = config;
10
softvar