【webpack】wabpack5 常用配置

1、开发配置

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]',
            }