带有requirejs/AMD的Webpack [英] Webpack with requirejs/AMD

问题描述

我正在为一个仍在使用requireJS进行模块加载的现有项目开发一个新模块.我正在尝试将新技术用于webpack之类的新模块(允许我通过es6导入使用es6加载器).似乎webpack无法与requireJS语法协调.它将显示以下内容:找不到模块:错误:无法在"中解决.

I'm working on a new module for an existing project that still uses requireJS for module loading. I'm trying to use new technologies for my new module like webpack (which allows me to use es6 loaders using es6 imports). It seems like webpack can't reconcile with requireJS syntax. It will say things like: "Module not found: Error: Can't resolve in ".

问题:Webpack不会捆绑其中包含requireJS/AMD语法的文件.
问题:有什么方法可以使Webpack与requireJS配合使用?

Problem: Webpack won't bundle files with requireJS/AMD syntax in them.
Question: Is there any way to make webpack play nice with requireJS?

我的最终输出必须为AMD格式，以便项目正确加载它.谢谢.

My final output must be in AMD format in order for the project to properly load it. Thanks.

推荐答案

我遇到了同样的问题，并且设法解决了这个问题.下面是相同的webpack.config.js文件.

I had the same question and I managed to achieve it. Below is the same webpack.config.js file.

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;

这篇关于带有requirejs/AMD的Webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！