直接说明：安装webpack后默认有配置文件，官方设置的默认配置文件只有在没有指定自定义配置文件时才会被使用。所以你一开始看不到webpack配置，需要自己写。
我们先记住名字webpack.config.js，这是webpack能识别的配置文件名字。然后我们来自己写配置文件，然后让webpack给我是龙给我盘着，给我乖乖用我写的配置文件！
webpack --config 你写好的配置文件名字（地址）
单独的webpack指令会寻找当前地址内的
webpack.config.js文件作为配置，一旦没找到，就会执行默认配置。
配置文件
module.exports = {
entry: './src/index.js',
output: './dist/main.js',
mode: 'production',
module: {
rules: [{
test: /\.txt$/,
use: 'raw-loader'
}]
},
plugins: [
new HtmlwebpackPlugin({
template: './src/index.html'
})
]
}
这里可以看出说是配置文件其实也是模块的写法，说白了node运行这个js模块达到了配置webpack的效果。 作为空配置：只需要entry、output两个属性指定入口文件和输出文件。
entry和output
其实很明显，entry告诉webpack入口文件的地址。入口文件就是所有项目js代码要执行时第一个执行的js文件，可以理解为所有js互相关联成一棵树，入口文件就是这个树根，执行入口文件就等于执行了所有你编写进项目的js代码。但是我们用webpack打包项目时肯定不需要跑我们的网站项目，所以这里的项目入口文件另有用处，node执行的是webpack（webpack的入口文件），而webpack打包就需要告诉它你的项目入口文件。
output也很明显，就是打包的结果，没有多神秘，就是把以入口文件为根的项目js树简化为单个js文件，不再是这个js引用那个js又引用这个js，就是把你写的所有分散js代码转换为了一个完整简单压缩率高且效果一样的单个js文件，然后你的网页html引用它。这个js结果文件由output属性指定位置和名字。
这里关于树的比喻是基于模块开发的思维，基于vue的单文件组件，即模块化，组件化开发（后期补上图片）。
入口和输出新规范（2021-9）
不要慌张，技术更新不会考虑新手懂不懂，他们只会想着自己怎么爽。。。咳咳
这里第一行我们通过node的模块引入语法require来引入这个path模块（这个模块是内置的）
然后通过path模块提供的对象方法resolve将前面我们的地址进行处理，新版webpack对于配置文件的规范要求（如果你下载的指定webpack老版本的话，上面的写法应该可以）。
然后我们把后面两个属性删除，不影响程序执行，目前我们不需要具体的打包效果，能打包就行。
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'main.js'
},
mode: 'production',
}
打包测试
剩下的配置先不写吧，博主目前也是学习ing，而且
loader和plugins是知识大点，需要单独讲。
现在按照设置好的地址，进行一次打包吧，先使用前面的指定配置文件的指令，然后就会自动执行打包！
webpack
webpack --config .\webpack.config.js
//下面是输出：
asset main.js 106 bytes [compared for emit] [minimized] (name: main)
./src/index.js 105 bytes [built] [code generated]
webpack 5.52.1 compiled successfully in 246 ms
这里我写了两个指令，直接的webpack会依据默认的配置，想要使用我们配置好的文件，就要使用--config参数。
对了你需要创建
index.js这个文件，main.js文件不用，输出文件可以输出得到，如果有会被覆盖。
index.js
console.log("打包这条代码吧，没有设置具体的打包配置，当然是原封不动输出！")
// 这是开发使用的备注信息
function fn() {
console.log("这是一个带有缩进格式的函数。")
}
fn()//可以尝试着去除该条语句再试试。
执行完webpack --config .\webpack.config.js（地址看自己的）指令后，去看看main.js是不是产生了，或则main.js文件的代码是不是和index一样。
通过打包，你会发现即使没有编写loader和plugins，webpack打包也会对js文件做基本处理，所以你会发现index文件中的备注在main中会消失，如果你试着去除fn()这条语句，fn函数就不会执行（main中直接消失）。
打包指令补充
指定webpack配置指令时注意地址，我们可以借助npm脚本简化这个步骤。
"scripts": {
"webpack": "webpack --config webpack.congfig.js"
},
为了方便开放的同时指定我们自定义的webpack配置，我们可以通过npm配置指令（npm run webpack）来简化代码。
附录：如果有问题，看看我的结构吧，如果结构出问题了。（请无视
node_modules，它产生于安装webpack模块时，暂时不需要知道）
热打包
每次项目更新，我们都要手动执行webpack进行打包，但是有指令可以自动监听项目变化，并自动打包。
webpack --watch
通过--watch参数，wabpack指令执行完后不会停止，而是持续运行监听项目变化。
