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 文件编译为 CSSuse: [// 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",
}