https://github.com/somewind/amd-webpack-plugin
make split chunks be AMD modules
https://github.com/somewind/amd-webpack-plugin
amd plugin webpack webpack-plugin
Last synced: 4 months ago
JSON representation
make split chunks be AMD modules
- Host: GitHub
- URL: https://github.com/somewind/amd-webpack-plugin
- Owner: somewind
- License: mit
- Created: 2019-02-22T09:04:13.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-06-14T06:22:32.000Z (about 4 years ago)
- Last Synced: 2025-08-30T04:41:26.350Z (10 months ago)
- Topics: amd, plugin, webpack, webpack-plugin
- Language: JavaScript
- Homepage:
- Size: 547 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# AMD webpack plugin
## Features
This plugin is used to enhance the AMD packaging mode of webpack:
1. Make `SplitChunks` to be AMD modules.
2. Inject `SplitChunks` AMD module names to entry chunk dependencies automatically.
3. Make webpack replace the `root external(global variable)` correctly.
4. The dynamic imports capability of webpack will be preserved.
5. Can Change the `define` wrapper name.
## Installation
```shell
npm i amd-webpack-plugin --save-dev
```
or
```shell
yarn add amd-webpack-plugin --dev
```
## Usage
`webpack.config.js`
```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`
```js
import jquery from 'jquery'
import three from 'three'
import lodash from 'lodash'
```
`src/entry2.js`
```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`
```js
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["asyc-import-data"],{
...
}]);
```
`dist/entry1.js`
```js
define(["three","vendor"], function(__WEBPACK_EXTERNAL_MODULE_three__) {
...
})
```
`dist/entry2.js`
```js
define(["d3","vendor"], function(__WEBPACK_EXTERNAL_MODULE_d3__) {
...
})
```
`dist/vendor.js`
```js
define(function() { return (window["webpackJsonp"] = window["webpackJsonp"] || []).push([["vendor"],{
...
}])})
```
You can get the full [demo](./demo)
## License
[MIT](./LICENSE)