在Wordpress上使用Webpack从网站js脚本拆分供应商第三方库js

Question

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

我的想法是构建 2 个 js。一个用于我的自定义 js 脚本(公共.js)，另一个包含所有第三方库(供应商.js)

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

在我的 webpack.config 中.js我创建了两个入口点：
vendor：[3rd js 库数组]，
public："./src/js/public.js">

但在控制台中我得到参考错误：图表未定义。

我知道我需要在主js(public.js)中导入库，但是通过这种方式，Webpack构建了公共.js在我编写自定义脚本的文件中使用完整的图表库代码，此时供应商.js没有存在的意义。

所以我的问题在这里。

有一种方法可以在供应商内部拥有第三方库.js并将我的自定义脚本放在公共中.js而无需在公共中导入 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),
)
};

Package.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"
}
}

公共的.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 代码.js(我想没有任何理由将库放在供应商入口点)。
我希望有一种方法可以将所有图表.js代码都放在供应商内部.js并有机会公开调用图表.js而无需导入完整的库。

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

Answer 1

1. 添加到 webpackexternals: { chart: 'Chart' },
2. 模板文件添加<canvas id="myChart" width="400" height="400"></canvas>
3. head 部分中的模板文件将添加<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',...

使用图表.js库 -> 外观的示例

我误解了你的问题。您无需将供应商添加到条目。我举个例子。

我有三个文件。

答.js

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

乙.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

更多拆分块插件