amd-webpack-plugin

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

License

MIT