const path = require('path');
const os = require('os');
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserWbpackPlugin = require('terser-webpack-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const threads = os.cpus().length; // cpu核数
// 封装样式loader函数,获取处理样式的loader
function getStyleLoader(pre) {
return [
MiniCssExtractPlugin.loader, // 提取css成单独的文件
'css-loader', // 将css资源编译成commonjs的模块到js中
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
'postcss-preset-env' // 能解决大多数样式兼容问题
]
}
}
},
pre
].filter(Boolean);
}
module.exports = {
// 单入口
entry: 'app.js',
// 多入口
// entry: {
// app: './src/app.js',
// main: './src/main.js'
// },
// 输出
output: {
// 所有文件的输出路径
// __dirname为node.js的变量,代表当前文件的文件夹目录
path: path.resolve(__dirname, 'dist'), // 绝对路径
// 入口文件打包输出的文件名
filename: 'static/js/main.js',
// 多入口文件打包
// filename: '[name].js', // webpack命名方式,[name]以入口文件名的key命名打包后的文件名
// 自动清空上次打包结果
clean: true
},
// 加载器
module: {
// loader的配置
rules: [
{
// 每个文件只能被其中一个loader配置处理
oneOf: [
// 处理css资源
{
test: /\.css$/, // 只检测.css文件
// loader: '', // 只能使用一个loader
// 使用多个loader,使用那些loader处理,执行顺序为【倒序】执行
use: getStyleLoader()
},
// 处理less资源
{
test: /\.less$/, // 只检测.css文件
use: getStyleLoader('less-loader')
},
// 处理sass资源
{
test: /\.s[ac]ss$/, // 只检测.css文件
use: getStyleLoader('sass-loader')
},
// 处理stylus资源
{
test: /\.sty$/, // 只检测.css文件
use: getStyleLoader('stylus-loader')
},
// 处理图片资源
{
test: /\(png|jpe?g|gif|webp|svg)$/,
type: 'asset',
parser: {
dataUrlCondition: {
// 小于10kb的图片转成base64,优化请求数量,但是会导致打包体积变大
maxSize: 10 * 1024 // 10kb
}
},
generator: {
// 输出图片名称
// [hash:10] hash值取前十位,[hash]取全部hash值
filename: 'static/image/[hash:10][ext][query]'
}
},
// 处理字体图标和其他资源
{
test: /\(ttf|woff2?|mp3|mp4|avi)$/,
type: 'asset/resource',
generator: {
// 输出字体名称
filename: 'static/media/[hash:10][ext][query]'
}
},
// babel
{
test: /\.js$/,
// include和exclude只能任选其一
exclude: /node_modules/, // 排除node_modules文件夹下的js文件
// include: path.resolve(__dirname, 'src'), // 只处理src文件夹下的文件,其它不做处理
use: [
{
loader: 'thread-loader', // 开启多进程对babel进行处理
options: {
works: threads // 进程数量
}
},
{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
// corejs解决js兼容性问题
{
useBuiltIns: 'usage',
corejs: 3
}
], // 使用智能预设
cacheDirection: true, // 开启babel缓存,提升开发环境下的打包速度
cacheCompression: false // 关闭缓存文件压缩,开启的话会占用内存空间,降低打包速度
}
}
]
}
]
}
]
},
// 插件
plugins: [
// eslint插件(必须先配置eslint文件 .eslintrc.js)
new ESLintPlugin({
// 检测哪些文件夹
context: path.resolve(__dirname, 'src'),
// 排除那些文件夹
exclude: 'node_modules', // 默认值
// 开启缓存
cache: true,
// 指定缓存文件的路径
cacheLocation: path.resolve(__dirname, 'node_modules/.cache/eslintcache'),
threads // 开启多进程和设置进程数量
}),
new HtmlWebpackPlugin({
// 模板:以public/index.html文件创建html文件
// 新的html文件特点:1、结构与原来一致 2、自动引入打包输出的资源
template: path.resolve(__dirname, 'public/index.html')
}),
// 提取css成单独文件
new MiniCssExtractPlugin({
filename: 'static/css/main.css'
}),
// PWA离线技术,将文件缓存在本地,可以实现离线访问,但是兼容性教差
new WorkboxPlugin({
clientClaim: true,
skipWaiting: true
})
// 若要使用PWA离线技术,需要将以下代码需要加到main.js当中
// if ('serviceWorker' in navigator) {
// window.addEventListener('load', () => {
// navigator.serviceWorker.register('/service-worker.js').then(registration => {
// console.log('SW registration', registration)
// })
// .catah(registrationError => {
// console.log('SW registration failed', registrationError)
// })
// })
// }
],
optimization: {
// 压缩的操作
minimizer: [
// css压缩
new CssMinimizerPlugin(),
// js压缩
new TerserWbpackPlugin({
parallel: threads // 开启多进程和设置进程数量
}),
// 图片压缩
new ImageMinimizerPlugin()
],
// 代码分割的操作
splitChunks: {
chunks: 'all'
},
runtimeChunk: {
name: (entrypoint) => `runtime${entrypoint.name}.js`
}
},
// 开发服务器(不会输出资源,在内存中编译打包)
devServer: {
host: 'loaclhost', // 域名
port: '3000', // 端口
open: true, // 是否自动打开浏览器
hot: true // HMR(HotModuleReplacement),默认开启(true),只能用于开发环境,生产环境不再需要,旨在提升打包构建速度
},
// 模式
mode: 'development', // 'production'
// Source-Map,形成映射文件,方便查定位错误
devtool: 'cheap-module-source-map' // 'source-map'
};
webpack基本配置
于 2023-12-16 02:28:03 首次发布