webpack的配置文件
webpack是一个模块打包工具，帮助我们把模块都打包到一起，当引入图片模块和JS模块，引入的流程和打包的方式肯定是不同的。加入引用的是JS文件，那么直接拿过JS文件来执行就可以了，假如引入的是图片文件，实际上只需要拿到图片的地址就可以了，并不需要把整个图片文件打包到js里面去。在打包的时候哪个文件才是打包的入口文件，打包出的文件放到哪里，这就需要配置文件来告诉webpack如何打包。
当我们执行npx webpack index.js , 不做任何配置也能打包成功，在跟目录下会生成一个dist文件。实际上webpack团队为了方便开发者使用一直在丰富webpack的默认配置，虽然没有写配置文件，但是在用它的默认配置文件。那如果想在项目中编写webpack的配置文件，该怎么做？
我们可以在项目目录下创建一个文件，webpack的默认配置文件名叫webpack.config.js
我们在命令行中运行 npx webpack 会报错
因为我们以前运行的是npx webpack index.js index.js的意思是让webpack打包 index.js这个文件，如果直接写npx webpack，那么webpack就不知道要打包的项目入口文件是哪一个，我们可以在webpack.config.js文件中做打包的配置
使用CommonJS的语法，写一个对象，就可以在里面做配置，这些配置都是webpack提供给的配置接口
const path = require('path)
module.exports = {
// entry 就是指定项目打包从哪一个文件开始打包
entry: './index.js' // webpack.config,js 和index.js在同一目录下,这样写没问题
// output 指定打包完成之后的文件地址
output : {
filename: "bundle.js", // 打包生成之后的文件名
path: 'path.resolve(_dirname, 'bundle)' // 默认是放在dist文件下，可以换文件夹的名字,path指的是打包生成我的文件放在哪一个文件夹下。path后面要跟一个绝对路径,直接写名字是不行的，要引入一个node的核心模块，在配置文件上面引入path : const path = require('path),引入一个叫path 的 node 的核心模块，然后调用这个path.resolve方法, 'path.resolve(_dirname, 'bundle)'中，_dirname这个node里面的变量，实际上指的是webpack.config.js文件所在的当前这个目录的路径，把它和bundle做一个结合，这样的话生成的路径就是bundle这个文件夹的绝对路径
}
}
以上配置好之后，就有了webpack一个标准的配置文件，这个配置文件要求我们从bundle.js打包，打包生成的文件放在bundle文件夹下，打包生成的文件名字叫做bundle.js
运行npx webpack 就生成了打包文件。
流程是当我们运行npx webpack 时，webpack不知道打包文件是啥，就会找webpack.config.js，根据配置文件的输出打包的流程。假设我们webpack.config.js名字改成别的，那么运行npx webpack 打包就会报错，因为webpack找不到默认的配置文件，默认的配置文件必须叫webpack.config.js。
那假如我们就是不想用这个配置名字呢？假如我们的配置文件叫WebpackConfig.js文件，那么运行的时候要写npx webpack --config WebpackConfig.js 让webpack以WebpackConfig.js为配置文件打包。
现在我们已经掌握了webpack最基本的使用，现在对项目做一下结构优化。
index.js文件是不能在浏览器直接运行的，必须由weback打包生成的最终的代码在可以在浏览器中运行，所以index.js是源代码，一般来说我们会将源代码放在一个叫src目录下，然后把所有的源代码放在src目录下。如下：
注意的是index.html不放在src中
因为index.js位置变了，所以要把webpack.config.js的入口文件改一下
在打包的过程中我们会经常用到npx webpack 来打包运行我们的项目，通常vue项目和React项目运行使用的是npm run这样的命令，如何用npm scripts 简化打包代码
我们在package.json文件,在里面会有scripts 标签配置项，我们可以在这个对象中配置一些命令：
"scripts": {
“bundle” : "webpack" // 当执行bundle这条命令的时候，会自动执行webpack这条命令，帮助我们打包（webpack就是打包），在命令行中运行npm run bundle 就可以帮我们打包，代替npx webpack
}, 如果在scripts中bundle命令中使用webpack，会先到工程目录下node_modules中去找webpack，而不是找全局的webpack，所以不用写npx webpack
我们将index.html放在dist文件下，index.html中的JS指向打包后的js文件，网页可以正常运行
回忆一下运行webpack：
- global 全局安装webpack，运行
webpack index.js - local 局部安装webpack， 运行
npx webpack index.js npm run bundle：这个局部安装，在webpack.config.js中指定打包入口文件，然后可以在package.json文件中红配置一下npm scripts脚本就可以直接运行npm run bundle这个命令，就可以了
这三种都是在命令行中去运行webpack。
安装webpack的时候，我们还安装了webpack-cli这个包，webpack-cli是做什么的呢？
它的作用就是使我们在命令行中可以正确的运行webpack这个命令，假设不安装webpack-cli这个包，就无法在命令行中运行webpack这个命令或者npx webpack这样的命令。
官网学习：
DOCUMENTATION----> Getting Started这个目录下的所有内容
