AMD webpack plugin
Features
This plugin is used to enhance the AMD packaging mode of webpack:
- Make
SplitChunks
to be AMD modules. - Inject
SplitChunks
AMD module names to entry chunk dependencies automatically. - Make webpack replace the
root external(global variable)
correctly. - The dynamic imports capability of webpack will be preserved.
- Can Change the
define
wrapper name.
Installation
npm i amd-webpack-plugin --save-dev
or
yarn add amd-webpack-plugin --dev
Usage
webpack.config.js
const path = require('path')
const AmdWebpackPlugin = require('amd-webpack-plugin')
// webpack config
module.exports = {
mode: 'development',
devtool: false,
entry: {
'entry1': path.join(__dirname, 'src/entry1.js'),
'entry2': path.join(__dirname, 'src/entry2.js')
},
module: {
rules: [
{
test: /\.jsx?|tsx?$/,
loader: ['babel-loader']
}
]
},
externals: {
// this will be replaced as global variable
'jquery': { root: '$' },
// this will be replaced as AMD dependency
'three': 'three',
'd3': { amd: 'd3' }
},
output: {
filename: '[name].js',
libraryTarget: 'amd'
},
plugins: [
new AmdWebpackPlugin()
// The following options are used by default
// new AmdWebpackPlugin({
// wrapper: 'define',
// hashedModuleIds: {
// hashFunction: 'md4',
// hashDigest: 'base64',
// hashDigestLength: 16
// }
// })
// in webpack mode 'production'
// it will set chunkIds = 'named' automatically
// you can set hashedModuleIds = false to ignore
],
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
default: false,
vendors: false,
// choose other node_modules to be vendor.js
vendor: {
name: 'vendor',
chunks: 'all',
minChunks: 1,
test: /[\\/]node_modules[\\/]/,
priority: 10
}
}
}
}
}
src/entry1.js
import jquery from 'jquery'
import three from 'three'
import lodash from 'lodash'
src/entry2.js
import jquery from 'jquery'
import d3 from 'd3'
import lodash from 'lodash'
// dynamic imports will use webpack module engine
// this chunk will not convert to AMD Module
import(
/* webpackChunkName: "asyc-import-data" */
'./data'
).then(data => {
console.log(data)
});
dist/async-import-data
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["asyc-import-data"],{
...
}]);
dist/entry1.js
define(["three","vendor"], function(__WEBPACK_EXTERNAL_MODULE_three__) {
...
})
dist/entry2.js
define(["d3","vendor"], function(__WEBPACK_EXTERNAL_MODULE_d3__) {
...
})
dist/vendor.js
define(function() { return (window["webpackJsonp"] = window["webpackJsonp"] || []).push([["vendor"],{
...
}])})
You can get the full demo