将第三方库组装到单独的文件(Webpack)中

我正在尝试将所有第三方库压缩到以下webpack配置中的一个文件中:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const fs = require('fs');

const scriptsDir = "./src/js/";
const vendorDir = "./src/js/vendor/";

const scripts = fs.readdirSync(scriptsDir).filter(elem => elem.endsWith('.js')).map(elem => scriptsDir + elem);
const vendor = fs.readdirSync(vendorDir).filter(elem => elem.endsWith('.js')).map(elem => vendorDir + elem);

module.exports = {
    entry: {            
        vendor: vendor,scripts: scripts,},output: {
        path: path.resolve(__dirname,"./dist/"),filename: "./js/[name].min.js"
    },devtool: "source-map",devserver: {
        overlay: true
    },module: {
        rules: [
            {
                test: /\.js$/,loader: "babel-loader",exclude: /node_modules/
            },{
                test: /\.scss$/,use: [
                    {
                        loader: MiniCssExtractPlugin.loader,options: { sourceMap: true,publicPath: "dist" }
                    },{ loader: "css-loader",options: { sourceMap: true } },{ loader: "sass-loader",options: { sourceMap: true } }
                ]
            }
        ]
    },plugins: [
        new MiniCssExtractPlugin({
            filename: "./css/styles.min.css"
        }),new HtmlWebpackPlugin({
            template: `./src/index.html`,filename: `index.html`
        })
    ]
};

这是我的目录结构:

将第三方库组装到单独的文件(Webpack)中

但是当我运行它时,出现以下错误:

将第三方库组装到单独的文件(Webpack)中

但是我已经将jquery文件和脚本导入了我的html文件中:

将第三方库组装到单独的文件(Webpack)中

danny8392 回答:将第三方库组装到单独的文件(Webpack)中

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2633343.html

大家都在问