this is my webpack configuration
const path = require("path")
const CleanWebpackPlugin = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const pkg = require("../package.json")
const webpack = require("webpack")
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
module.exports = {
context: path.resolve(__dirname, "../"),
mode: "development",
target: "web",
entry: {
app: "./src/main.js"
},
output: {
filename: "js/[name].bundle.js",
path: path.resolve("./dist"),
publicPath: "/"
},
resolve: {
// modules: [
// path.resolve("./src"),
// "node_modules"
// ],
alias: {
"@": path.resolve("./src")
},
extensions: [".js", ".vue", ".json"]
},
module: {
rules: [
{
test: /\.js$/,
include: [path.resolve("./src")],
loader: "babel-loader"
},
{
test: /\.js$/,
include: [path.resolve("./src")],
enforce: "pre",
loader: "eslint-loader",
options: {
formatter: require("eslint-friendly-formatter"),
emitError: true
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader",
options: {
sourceMap: true
}
},
{
loader: "css-loader",
options: {
sourceMap: true,
importLoaders: 1
}
},
{
loader: "postcss-loader",
options: {
sourceMap: true
}
}
]
},
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: "url-loader",
options: {
limit: 8192,
name: "images/[name].[hash:5].[ext]"
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: "url-loader",
options: {
limit: 10240,
name: "fonts/[name].[hash:5].[ext]"
}
}
]
},
devServer: {
contentBase: path.resolve("static"),
publicPath: "/",
compress: true,
hot: true,
open: true,
overlay: true,
port: 9999,
clientLogLevel: "warning",
proxy: {}
},
plugins: [
new CleanWebpackPlugin([path.resolve("./dist")], {
root: path.resolve("./")
}),
new HtmlWebpackPlugin({
title: pkg.name,
filename: "index.html",
template: path.resolve("index.html")
}),
new webpack.HotModuleReplacementPlugin(),
new BundleAnalyzerPlugin()
],
devtool: "cheap-eval-source-map"
}
Why did you type in style-loader and css-loader when using analyzer to analyze after packaging? Causes the file to be very large
"webpack": "^4.12.2",
"webpack-cli": "^3.0.8"
package.json
{
"name": "bundletask",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --display --config ./build/webpack.config.js",
"dev": "webpack-dev-server --inline --progress --color --config ./build/webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^8.6.4",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.5",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"chalk": "^2.4.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"eslint": "^5.0.1",
"eslint-config-standard": "^11.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"postcss-loader": "^2.1.5",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack": "^4.12.2",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
}
}