我正在尝试将所有第三方库压缩到以下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`
})
]
};
这是我的目录结构:
但是当我运行它时,出现以下错误:
但是我已经将jquery文件和脚本导入了我的html文件中: