webpack从0到手写webpack_04

webpack的配置文件

之前我们说过webpack是一个模块打包工具，它会帮你把模块打包到一起，当你打包js文件和图片文件他的流程肯定是不同的。假如你引入的是js文件，你直接使用 webpack执行打包就可以了，
假如你引入的是一个图片文件，实际上你只要拿到图片的地址就可以了，我们并不需要把整个图片文件打包到js文件中去，所以js打包和图片的打包肯定是不同的。
打包的时候哪一个是入口文件，打包到哪里，webpack没有智能到那种程度。需要你通过一个配置文件告诉他到底怎么打包。以项目demo02为例，
执行打包命令，可以正常生成dist文件夹和文件

npx webpack ./index.js

webpack团队为了大家用webpack尽可能的爽，一直在不断的丰富webpack的默认配置，虽然你没有写任何配置文件，实际上你用的是它的默认的配置文件。
如果你想在项目中编写webpack的默认配置文件，在项目中新建一个webpack.config.js文件

执行 npx webpack，报错

因为之前执行 npx webpack /index.js叫webpack打包index.js文件，如果你不写这个文件，webpack就不知道你要打包的这个项目的入口文件是哪一个了。

但是没关系，我们可以在webpack.config.js配置文件中做打包的配置

运行npx webpack，此时不添加文件名，也可以正常打包

我们优化以下目录结构，header.js，sidebar.js 和contente.js这些属于源代码，我们在项目中新建一个src

这个时候我们要打包的是src目录下的index.js，因此webpack中入口文件的配置需要改一下

运行npx webpack命令，可以正常打包

我们现在常用的是npx webpack命令，但是我们在vue或react的项目中一般使用npm run命令，我们如何用npm script来简化我们的打包代码
在package.json中添加bundle命令执行webpack打包

使用npm run bundle命令，正常打包，这就是如何用npm script运行打包命令

把index.html放入bundle文件夹中，记得修改引入的<script src="./bundle.js"></script>

打开index.html.网页内容正常显示