[我正在一个WordPress网站上使用Swiper库，在多个页面上将其作为npm依赖项。该网站中包含一个嵌入式Vue CLI 4应用程序，我也想向其中添加Swiper库。当前，该网站具有自己的webpack配置，而该应用使用其默认构建配置的稍微修改的版本。
我有[可以使用] Vue Swiper组件，但由于我已经在使用原始库，所以我想避免重复。我认为我需要以某种方式组合两个构建过程（除非有另一种解决方案），但是我之前从未尝试过类似的尝试。Webpack的主要配置如下：
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = (env, options) => {
return {
entry: {
main: ["./src/js/index.js", "./src/scss/index.scss"],
admin: ["./src/scss/admin.scss", "./src/js/admin/index.js"]
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js",
publicPath: "/dist"
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: { presets: ["@babel/preset-env"] }
}
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
},
{
test: /\.svg$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/images',
publicPath(url) {
return `/wp-content/themes/themename/dist/images/${url}`
},
},
}
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css"
})
]
}
};
和目录结构：
├── app
| ├── src
| ├── dist
| ├── ...
| └── vue.config.js
├── src
├── dist
├── ...
└── webpack.config.js
理想情况下，我想保持目录不变，因此如何在两个项目中都使用Swiper，而又不会在两个捆绑软件中重复使用Swiper？
我正在一个WordPress网站上使用Swiper库，在多个页面上将其作为npm依赖项。网站中包含一个嵌入式Vue CLI 4应用程序，我也想添加Swiper ...