javascript - 在 Wordpress 上使用 Webpack 从网站 js 脚本中拆分 vendor 第三方库 js

Question

我是 Webpack 世界的新手。
我遵循了一些教程，并在我的 Wordpress 主题文件夹中安装了一个新的 Webpack，一切正常。

我的想法是构建 2 js。一个用于我的自定义 js 脚本 (public.js)，一个包含所有第三方库 (vendor.js)

现在我开始编写关于我的新主题的代码，我需要包含一些第三方库。
例如 chartjs.js，它使用 Chart 命令来启动一个新的图形图表。

在我的 webpack.config.js 文件中，我创建了两个入口点:
vendor :[第三个 js 库的数组]，
公共(public):'./src/js/public.js'

但在控制台中我得到了 referenceError: Chart is not defined.

我知道我需要在主 js (public.js) 中导入库，但是通过这种方式，Webpack 在我编写自定义脚本的文件中使用完整的 Chart 库代码构建 public.js point vendor.js 没有意义存在。

所以这是我的问题。

有一种方法可以在 vendor.js 中包含第三方库，并在 public.js 中包含我的自定义脚本，而无需在 public.js 中导入 js 库吗？

这些是我的具有导入功能的文件:

Webpack.config.js

const path = require('path');
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

const modeConfig = env => require(`./configs/${env.mode}.js`)(env);

module.exports = env => {
    return webpackMerge(
        {
            mode: env.mode,
            entry: {
                vendor: ['./node_modules/jquery/dist/jquery.min.js','./node_modules/lottie-web/build/player/lottie.min.js'],
                public: './src/js/public.js',
            },
            output: {
                filename: '[name].js',
                path: path.resolve(__dirname, 'assets/js/')
            },
            module: {
                rules: [
                    {
                        test: /\.jsx?$/,
                        exclude: /(node_modules|bower_components)/,
                        loader: 'babel-loader',
                    },
                    {
                        test: /\.(png|jpe?g|gif|svg)$/,
                        use: [
                            {
                                loader: 'file-loader',
                                options: {
                                    name: '/[name].[ext]',
                                    outputPath: '../../assets/img',
                                },
                            }
                        ],
                    },

                ],
            },
            resolve: {
                alias: {
                    charts: path.resolve(__dirname, 'node_modules/lottie-web/build/player/lottie.min.js'),
                }
            },
            plugins: [
                new webpack.ProvidePlugin({
                    $: 'jquery',
                    jQuery: 'jquery',
                }),
                new CleanWebpackPlugin(),
            ]
        },
        modeConfig(env),
    )
};

包.json

{
  "name": "wolftrick",
  "version": "1.0.0",
  "description": "Package file for Wolftrick website",
  "scripts": {
    "dev": "webpack --watch --env.mode development",
    "build": "webpack -p --env.mode production"
  },
  "author": "Wolftrick",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "@babel/preset-env": "^7.5.4",
    "autoprefixer": "^9.6.1",
    "babel-loader": "^8.0.6",
    "browser-sync": "^2.26.7",
    "browser-sync-webpack-plugin": "^2.2.2",
    "bulma": "^0.7.5",
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^5.2.0",
    "css-loader": "^3.0.0",
    "file-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^2.1.0",
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2",
    "webpack-merge": "^4.2.1"
  },
  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "Firefox ESR",
    "android 4",
    "opera 12",
    "ie >= 10",
    "ie_mob >= 10",
    "ff >= 30",
    "chrome >= 34",
    "safari >= 7",
    "opera >= 23",
    "ios >= 7",
    "android >= 4.4",
    "bb >= 10",
    "not dead"
  ],
  "dependencies": {
    "jquery": "^3.4.1",
    "chart": "^2.8.0"
  }
}

公共(public).js

import '../scss/style.scss';

import Chart from 'charts';

'use strict';

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

使用此代码 Chart 可以完美运行，但我将所有 Chart.js 代码都放在 public.js 中(我想没有任何理由将库放在 vendor 入口点中)。
我希望有一种方法可以将所有 chart.js 代码放在 vendor.js 中，并有机会在 public.js 中调用 Chart 实例，而无需导入完整的库。

非常感谢你，我希望我能很好地解释自己，因为我的英语不好。

Answer 1

1. 添加到 webpack externals: { chart: 'Chart' },
2. 模板文件添加<canvas id="myChart" width="400" height="400"></canvas>
3. 头部部分的模板文件将添加<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
4. 按照示例添加您的代码let ctx = document.getElementById('myChart'); let myChart = new Chart(ctx, {
type: 'bar',...

使用 chart.js 库的示例 -> look

我误解了你的问题。您不需要将 vendor 添加到条目中。我举个例子。

我有三个文件。

a.js

import Chart from 'chart.js';

let ctx = document.getElementById('myChart');
let myChart = new Chart(ctx, {
  type: 'bar',
  ...

b.js

import Chart from 'chart.js';
import $ from "jquery";

let ctx = document.getElementById('myChart');
let myChart = new Chart(ctx, {
  type: 'bar',
  ...

c.js

console.log('next site');

webpack.config.js

entry: {
  pagea: './a.js',
  pageb: './b.js',
  pagec: './c.js'
},
optimization: {
  splitChunks: {
    chunks: "all",
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  }
},

因此，您将拥有:

pagea.js
pageb.js
pagec.js
vendors~pagea~pageb.js // chart.js for pagea + pageb
vendors~pageb.js // jquery for pageb

更多SplitChunksPlugin