webpack.dev.js（webpack开发环境配置文件）

开发环境：只运行本地资源不打包dist

---

对于在config目录下的webpack.dev.js    

1.在根目录下运行

npx webpack serve --config ./config/webpack.dev.js

2.在package.json文件中配置

"dev":"npx webpack serve --config ./config/webpack.dev.js"

const path =require('path')
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
    //入口
    //输出
    //加载器
    //插件
    //模式
    entry:"./src/main.js",//相对路径
    output:{
        path:undefined,//开发模式没有输出，不需要指定输出目录
        //入口文件打包输出的文件名
        filename:"static/js/main.js",
        //clean: true,// 开发模式没有输出，不需要清空输出结果
    },
    module:{
        rules:[
            //loader的配置
            {
                test: /\.css$/, //只检测.css文件
                use: [//执行顺序从右到左，从下到上
                'style-loader', //将js中的css通过创建style标签添加到html文件中生效
                'css-loader'],//将css资源编译成common.js到webpack中
              },
              {
                test: /\.less$/i,
                //loader:"xxx" 只能使用一个loader use可以使用多个
                use: [
                  // compiles Less to CSS
                  'style-loader',
                  'css-loader',
                  'less-loader',
                ],
              },
              {
                test: /\.s[ac]ss$/i,
                use: [
                  // 将 JS 字符串生成为 style 节点
                  'style-loader',
                  // 将 CSS 转化成 CommonJS 模块
                  'css-loader',
                  // 将 Sass 编译成 CSS
                  'sass-loader',
                ],
              },
              {
                test: /\.styl$/,
                // loader: 'stylus-loader', // 将 Stylus 文件编译为 CSS
                use: [
                  // compiles Less to CSS
                  'style-loader',
                  'css-loader',
                  'stylus-loader',
                ],

              },
              {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: 'asset',
                parser: {
                  dataUrlCondition: {
                    //小于10kb的图片转base64 减少请求数量 但是体积会大一点
                    maxSize: 10 * 1024 // 10kb
                  }
                },
                generator: {
                  filename: 'static/images/[hash:10][ext][query]'
                  //图片命名有点长 [hash:10]只取十位
                }
              },{
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource',
                generator: {
                  filename: 'static/fonts/[hash:10][ext][query]'
                }
              },{
                test: /\.(mp3|mp4|avi)$/,
                type: 'asset/resource',
                generator: {
                  filename: 'static/media/[hash:10][ext][query]'
                }
              }, {
                test: /\.js$/,
                exclude: /(node_modules)/,//排除node_modules中的js文件
                use: {
                  loader: 'babel-loader',
                  // options: {
                  //   presets: ['@babel/preset-env'],
                  // },
                },
              }
        ]
    },
    //插件需要引用才能使用
    plugins:[
        //插件的配置
        new ESLintPlugin({
          //检测哪些文件
          context: path.resolve(__dirname,'../src'),
        }),
        new HtmlWebpackPlugin({
          //模版 新的html文件结构与原来一致 会自动引入打包的资源
          template:path.resolve(__dirname,'../public/index.html')
        })
    ],
    //开发服务器 不会输出资源 在内存中编译打包
    devServer:{
      host:"localhost",
      port:3000,
      open:true // 是否自动打开浏览器
    },
    //模式
    mode:"development"
}