构建我的bundle.js和bundle.css时,在此过程中创建了很多(399!)JavaScript文件。我还获得了必需的bundle.css和bundle.js,并且不需要399个额外的文件,因为没有它们,我的应用程序似乎可以正常工作(在webpack构建后删除它们)。 我不明白为什么会这样。我正在使用webpack 4.30。
我试图重建我的webpack配置,但最终我还是使用了相同的配置才能正常工作。我是webpack的新手。
webpack.config.js
const path = require('path');
const webpack = require("webpack");
const autoprefixer = require("autoprefixer");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: {
app: ['babel-polyfill', './src/main.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'wwwroot/js')
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
}
]
},
{
test: /\.scss$/,
sideEffects: true,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "../css/bundle.css",
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer()
]
}
})
],
resolve: {
extensions: [ '.js', '.vue' ],
alias: {
vue$: "vue/dist/vue.esm.js"
}
}
};
package.json
{
"name": "TestProject",
"sideEffects": false,
"version": "1.0.0",
"private": true,
"description": "Just a test project",
"main": "index.js",
"scripts": {
"watch": "webpack --watch --mode development",
"dev": "webpack --mode development --display-error-details",
"build": "webpack --mode production --progress"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.4.4",
"@fortawesome/fontawesome-free": "^5.8.1",
"autoprefixer": "^9.5.1",
"babel-loader": "^8.0.5",
"babel-polyfill": "^6.26.0",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.2"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "latest",
"@fortawesome/free-regular-svg-icons": "^5.8.1",
"@fortawesome/free-solid-svg-icons": "latest",
"@fortawesome/vue-fontawesome": "latest",
"ace-builds": "^1.4.4",
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"chart.js": "^2.8.0",
"jquery": "^3.4.1",
"popper.js": "^1.14.7",
"vue": "^2.6.9",
"vue-chartjs": "^3.4.2",
"vue-flatpickr-component": "^8.1.2",
"vue-markdown": "^2.2.4"
}
}