带有 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屋！