以下的 webpack 的 config 文件包含常用的插件和设置项,适合初学 webpack 和想回忆 webpack 常用项的同学学习
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const BundleAnalyzerPlugin =
require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
entry: './src/index.js',
output: {
filename: `dist.js`,
path: path.resolve(__dirname, 'dist'),
},
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
devServer: {
static: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
title: '博客列表',
}),
new BundleAnalyzerPlugin(),
],
resolve: {
alias: {
utils: path.resolve(__dirname, 'src/utils/test'),
},
},
module: {
rules: [
{
test: /\.less$/i,
use: [
'style-loader',
'css-loader',
'less-loader',
],
},
{
test: /\.(png|jpg|gif|svg|)$/i,
type: 'asset/resource',
},
{
test: /\.js$/i,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
};