Webpack mit requirejs/AMD

Arbeite ich an einem neuen Modul für ein bestehendes Projekt, das noch verwendet requireJS zum laden der module. Ich bin versucht, neue Technologien zu benutzen, für mein neues Modul wie webpack (die es mir erlaubt die Verwendung es6 Lader mit es6-Importe). Wie es scheint, webpack nicht in Einklang bringen kann mit requireJS-syntax. Es wird Dinge sagen wie: "Modul nicht gefunden: Fehler: Kann nicht zu lösen ".

Problem: Webpack nicht-bundle-Dateien mit requireJS/AMD syntax in Ihnen.

Frage: gibt es eine Möglichkeit, um webpack spielen schön mit requireJS?

Mein letzten Ausgabe muss im AMD-format, um für das Projekt ordnungsgemäß zu laden. Danke.

  • Sie konnte werfen Sie einen Blick auf einige der babel-Lader für webpack. Ich hatte ähnliche Probleme, können Sie in der Regel transpile zwischen Modul-Systeme mit babel
  • ich bin bereits mit babel-loader in mein webpack config
InformationsquelleAutor goldensausage | 2017-05-29
  1. 10

    Ich hatte die gleiche Frage und ich schaffte es, es zu erreichen. Unten ist die gleiche webpack.config.js - Datei. 

    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;
    • Ist es möglich, dies zu tun mit Webpack Encore?
    InformationsquelleAutor softvar
Schreibe einen Kommentar