Webpack Optimization

CDN (Content Delivery Network)

Required plugins 必备插件：

• html-webpack-plugin
• add-asset-html-cdn-webpack-plugin

install 下载

npm i html-webpack-plugin -D
npm i add-asset-html-cdn-webpack-plugin -D

usage 使用

cdn.config.js

modules.exports = {
    'jquery': 'https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js',
    'bootstrap': 'https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css',
}

Note: add-asset-html-cdn-webpack-plugin is based on html-webpack-plugin dynamic injection of cdn data to html template.

注意：add-asset-html-cdn-webpack-plugin是基于html-webpack-plugin动态加载到html模板中，先配置好相关的html-webpack-plugin选项，再进一步配置需要注入的cdn功能库。

externals.config.js

module.exports = {
    'jquery': '$',
}

webpack.config.js

const path = require("path");
const AddAssetHtmlCdnWebpackPlugin = require('add-asset-html-cdn-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const cdnConfig = require('./cdn.config.js');
const externalsConfig = require('./externals.config.js');

module.exports =  {
    mode: 'production',
    entry: {
      "index": path.resolve(__dirname, '../src/index.js'),
      "login": path.resolve(__dirname, "../src/login.js"),
      "register": path.resolve(__dirname, "../src/register.js"),
    },
    output: {
      filename: "[name].min.js",
      path: path.resolve(__dirname, "../dist")
    },
    module: {
      rules: [
        { test: /\.js$/, use: 'babel-loader' },
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: "Home",
        filename: "index.html",
        template: path.resolve(__dirname, "../public/index.html"),
        inject: 'body',
        minify: {
          collapseWhitespace: true,
          removeAttributeQuotes: true,
          removeComments: true,
        },
        chunksSortMode: "manual",
        chunks: ['login', 'register' ,'index'],
      }),
      new AddAssetHtmlCdnWebpackPlugin(true, cdnConfig),
    ],
    externals: externalsConfig
};

./src/index.js 上述文件配置好后，就能在src目录文件中引入，而不会在打包的index.min.js中被编译。

import $ from "jquery";