带有 requirejs/AMD 的 Webpack
Posted
技术标签:
【中文标题】带有 requirejs/AMD 的 Webpack【英文标题】:Webpack with requirejs/AMD 【发布时间】:2017-10-30 06:11:00 【问题描述】:我正在为一个仍然使用 requireJS 进行模块加载的现有项目开发一个新模块。我正在尝试为我的新模块使用新技术,例如 webpack(它允许我使用 es6 加载器使用 es6 导入)。似乎 webpack 无法与 requireJS 语法协调一致。它会说:“未找到模块:错误:无法解析”。
问题:Webpack 不会捆绑包含 requireJS/AMD 语法的文件。问题:有什么方法可以让 webpack 与 requireJS 配合得很好?
我的最终输出必须是 AMD 格式,以便项目能够正确加载它。谢谢。
【问题讨论】:
你可以看看一些用于 webpack 的 babel 加载器。我有类似的问题,你通常可以使用 babel 在模块系统之间进行转换 我已经在我的 webpack 配置中使用了 babel loader 【参考方案1】:我也有同样的问题,我设法做到了。下面是相同的webpack.config.js
文件。
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;
【讨论】:
是否可以使用 Webpack Encore 做到这一点?以上是关于带有 requirejs/AMD 的 Webpack的主要内容,如果未能解决你的问题,请参考以下文章
requirejs amd module load example
使用插件将RequireJS / AMD迁移到Webpack