当前位置：首页 > news >正文

【webpack】wabpack5 常用配置

news 来源：原创 2024/9/20 6:13:04

开发配置

const { Configuration } = require('webpack')const path = require('path')
// 导入 eslint 插件
const ESLintPlugin = require('eslint-webpack-plugin')
// 导入 html插件
const HtmlWebpackPlugin = require('html-webpack-plugin')// webpack5 基本配置
/*** @type {Configuration}*/
module.exports = {// 入口entry: './src/main.js',// 输出output: {path: undefined,filename: 'static/js/bundle.js',clean: true,},// 开发模式mode: 'development',// 添加开发环境代码映射devtool: 'eval-source-map',// 别名resolve: {alias: {'@': path.resolve(__dirname, '../src'),},},// 加载器module: {rules: [{oneOf: [// 处理.js文件，进行兼容性处理{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {// 开启babel缓存cacheDirectory: true,// 关闭缓存文件压缩cacheCompression: true,// 减少代码体积插件plugins: ['@babel/plugin-transform-runtime'],},},},// 处理.css文件{test: /\.css$/i,use: ['style-loader', 'css-loader'],// use: ['../loaders/style-loader', 'css-loader'],},// 处理.less文件{test: /\.less$/i,use: ['style-loader', 'css-loader', 'less-loader'],},// 处理.sass或.scss文件{test: /\.(scss|sass)$/i,use: ['style-loader', 'css-loader', 'sass-loader'],},// 处理.styl文件{test: /\.styl$/i,use: ['style-loader', 'css-loader', 'stylus-loader'],},// 处理图片资源，无需下载依赖，webpack内置{test: /\.(png|jpe?g|gif|webp)$/i,type: 'asset',parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb转为base64，默认小于8kb},},// 修改输出目录generator: {filename: 'static/images/[name].[hash:8][ext]',},},// 处理字体文件，不转base64{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,type: 'asset/resource',generator: {filename: 'static/fonts/[name].[hash:8][ext]',},},// 处理md文件{test: /\.md$/i,loader: path.resolve(__dirname, '../build/md-loader.js'),// loader: 'html-loader',},// 处理svg文件{test: /\.svg$/i,type: 'asset/resource',generator: {filename: 'static/images/[name].[hash:8][ext]',},}],},],},// 插件plugins: [// 添加 eslint 规则，打包时有效new ESLintPlugin({context: path.resolve(__dirname, '../src'),// 相对context的路径exclude: ['./assets'],}),// 使用html插件自动引入打包文件new HtmlWebpackPlugin({template: path.resolve(__dirname, '../public/index.html'),}),],// 配置开发服务器devServer: {host: 'localhost',port: 3000,open: true,// 热替换，默认开启且只对样式有效，js模块需要单独写代码（vue-loader等就是这样）// hot: true,// 配置代理proxy: {'/api': {// 目标服务器target: 'http://127.0.0.1:3000',// 路径重写pathRewrite: {'^/api': '',},},},},
}

2、生产配置

const { Configuration } = require('webpack')const path = require('path')
// 获取线程数
const os = require('os')
const threads = os.cpus()?.length ? os.cpus().length - 1 : 1// 导入 eslint 插件
const ESLintPlugin = require('eslint-webpack-plugin')
// 导入 html 插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 导入抽离 css 样式插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 导入压缩样式插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
// 导入压缩js插件
const TerserPlugin = require('terser-webpack-plugin')
// 导入preload插件
const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin')
// 自定义打包文件分析插件
const AnalyzeWebpackPlugin = require('../plugins/analyze-plugins')// 定义返回样式 loader 的方法
const getStyleLoaders = preProcessor => {const loaders = [MiniCssExtractPlugin.loader,'css-loader',{loader: 'postcss-loader',options: {postcssOptions: {plugins: ['postcss-preset-env'],},},},]if (preProcessor) {loaders.push(preProcessor)}return loaders
}// webpack5 基本配置
/*** @type {Configuration}*/
module.exports = {// 入口entry: './src/main.js',// 输出output: {path: path.resolve(__dirname, '../dist'),filename: 'static/js/[name].[hash:8].js',// 清空上次打包内容clean: true,// 给打包的chunk文件命名chunkFilename: 'static/js/[name].[hash:8].chunk.js',// 给type: 'asset'静态资源命名assetModuleFilename: 'static/media/[name].[hash:8][ext]',},// 生产模式mode: 'production',// 别名resolve: {alias: {'@': path.resolve(__dirname, '../src'),},},// 加载器module: {rules: [{// 每个文件只会匹配一种规则就结束oneOf: [// 处理.js文件，进行兼容性处理{test: /\.js$/,exclude: /node_modules/,use: [// 使用thread-loader，开启多线程{loader: 'thread-loader',options: {workers: threads,},},{loader: 'babel-loader',options: {// 开启babel缓存cacheDirectory: true,// 关闭缓存文件压缩cacheCompression: false,// 减少代码体积插件，plugins: ['@babel/plugin-transform-runtime'],},},],},// 处理.css文件{test: /\.css$/i,use: getStyleLoaders(),},// 处理.less文件{test: /\.less$/i,use: getStyleLoaders('less-loader'),},// 处理.sass或.scss文件{test: /\.(scss|sass)$/i,use: getStyleLoaders('sass-loader'),},// 处理.styl文件{test: /\.styl$/i,use: getStyleLoaders('stylus-loader'),},// 处理图片资源，无需下载依赖，webpack内置{test: /\.(png|jpe?g|gif|webp)$/i,type: 'asset',parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb转为base64，默认小于8kb},},},// 处理字体文件，不转base64{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,type: 'asset/resource',},// 处理md文件{test: /\.md$/i,loader: path.resolve(__dirname, '../build/md-loader.js'),// loader: 'html-loader',},],},],},// 插件plugins: [// 添加 eslint 规则，打包时有效new ESLintPlugin({context: path.resolve(__dirname, '../src'),// 相对context的路径exclude: ['./assets'],// 开启多线程threads,}),// 使用html插件自动引入打包文件new HtmlWebpackPlugin({template: path.resolve(__dirname, '../public/index.html'),}),// 使用抽离样式插件new MiniCssExtractPlugin({filename: 'static/css/[name].[hash:8].css',chunkFilename: 'static/css/[name].[hash:8].chunk.css',}),// 使用开启preload的插件new PreloadWebpackPlugin({rel: 'preload',as: 'script',}),new AnalyzeWebpackPlugin(),],// 优化配置optimization: {minimizer: [// 使用压缩样式插件new CssMinimizerPlugin(),// 使用压缩js插件new TerserPlugin({parallel: threads,}),],splitChunks: {chunks: 'all',},runtimeChunk: {name: entrypoint => `runtime-${entrypoint.name}`,},},}

3、自定义loader

loader本质就是一个module.exports导出一个函数，这个函数的返回值是可以执行的js代码；
以下实现类似 style-loader 功能

module.exports = function () {}
module.exports.pitch = function (remainingRequest) {// D:\前端\my-webpack\node_modules\css-loader\dist\cjs.js!D:\前端\my-webpack\src\assets\styles\index.cssconst relativePath = remainingRequest.split('!').map(absolutePath => {return this.utils.contextify(this.context, absolutePath)}).join('!')// ../../../node_modules/css-loader/dist/cjs.js!./index.cssreturn `import style from '!!${relativePath}'const styleEl = document.createElement('style');styleEl.innerHTML = style;document.head.appendChild(styleEl);`
}

4、自定义插件

插件本质是一个导出一个类，内部有各种生命周期钩子；
以下实现打包后生成文件大小分析报告；

// 一个 JavaScript 类
class AnalyzeWebpackPlugin {apply(compiler) {// 在打包压缩后，资源输出前执行compiler.hooks.emit.tap('AnalyzeWebpackPlugin', compilation => {// 获取打包后资源的文件名和大小const assets = Object.entries(compilation.assets)let source = '# 打包文件大小分析 \n|名称|大小|\n|-|-|'assets.forEach(([fileName, file]) => {source += `\n|${fileName}|${Math.ceil(file.size() / 1024)}kb|`})// 输出分析报告compilation.assets['analyze.md'] = {source() {return source},size() {return source.length},}})}
}module.exports = AnalyzeWebpackPlugin