webpack.prod.js（webpack生产环境配置文件）

生产环境：只打包不运行本地服务器

---

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

1.在根目录下运行

npx webpack --config ./config/webpack.prod.js

2.在package.json文件中配置

"build":"npx webpack --config ./config/webpack.prod.js"

const path =require('path')
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
    //入口
    //输出
    //加载器
    //插件
    //模式
    entry:"./src/main.js",//相对路径
    output:{
        //文件的输出路径 __dirname:当前文件的文件夹目录
        path:path.resolve(__dirname,"../dist"),//绝对路径 path是所有文件的输出路径
        //入口文件打包输出的文件名
        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')
        })
    ],
    //模式
    mode:"production",
}