Webpack—webpack.config.js配置详情_webpack --config-优快云博客

本文链接：https://blog.youkuaiyun.com/Poppy_LYT/article/details/100162884

本文详细解析Webpack配置文件webpack.config.js的使用方法，包括如何设置开发环境、指定入口文件、定义输出目录，以及更改配置文件名称的步骤。同时，强调了配置中绝对路径的重要性，并介绍了mode属性在开发与生产环境中的不同作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Webpack—webpack.config.js配置详情

const path = require('path');
module.exports = {
	 mode: 'development', // 开发环境
    entry: './src/main.js', // 打包的入口文件
    output: { // 打包好后输出配置
        filename: ‘main.js', // 设置打包好后的文件名
        path: path.resolve(__dirname, ‘diet’) // 设置输出文件路径
    }
}


1、webpack.config.js 出口文件放置位置一定要是绝对路径
用const path = require（‘path’）path.resolve（）获取绝对路径
path.resolve（__dirname, ‘diet’）中的
__dirname是webpack.config.js的存放地址,就是文件夹后面的灰色地址
__dirname当前文件路径， 通过path.resolve进行拼接
__dirname后面的是起的文件名。一般都起名dist
配置完成之后把dist文件夹删除（或者修改过程中打包只需要把main.js删除即可），并运行npx

2、webpack.config.js配置文件名称是不能改变的，如要改成其他名字打包会报错，如果一定要去修改，需要进行配置，配置代码如下：
	webpack --config  webpackconfig.js（修改后的名字） 就可以更改了 但是一般我们不要去改配置文名称

3、development 开发环境 非压缩
	production 操作环境 压缩
	如果不设置打包后就默认压缩，开发时不想压缩就可以设置
	mode: 'development',