Webpack是什么？

webpack是一个使用Node.js实现的一个模块化代码打包工具

首先要先安装webpack

先创建一个文件夹，然后去给他初始化一下

npm init

然后在cmd内去输入指令进行安装

npm install -D webpack webpack-cli

完成后可以去package.json内查看版本是否有安装成功

或者使用./node_modules/.bin/webpack -v指令来查看

然后是如何使用他，可以举个例子，比如需要使用index.html来获取一个src文件夹内的a.js的内容，可以使用./node_modules/.bin/webpack ./src/a.js方法来将其进行打包，打包完成后会发现多出一个dist文件夹和里面的main.js，我们可以在index.html内引入这个即可获取到a.js的内容

我们每次打包如果都使用./node_modules/.bin/webpack的话是比较繁琐的，所以为了方便使用，我们可以到package.json中的scripts中来进行简化，例如：

然后如果要打包的话直接使用npm start即可，

要知道他有一些特殊的指令，例如start、stop、restart等，直接使用npm start即可输出

正常的一些指令，例如hello，是需要使用npm run hello

虽然我们可以直接通过命令来打包，但是更推荐创建一个webpack.js的配置文件来实现更方便和强大的功能

要知道指定打包入口文件有三种不同的形式，string\object\array

第一种，这是一个入口，一个打包文件

第二种，这是多个入口，一个打包文件

第三种，他是多个入口，多个打包文件

打包完成后

__dirname作用是获取当前项目所在的文件目录

dist含义是如果他没有，那就创建一个dist文件，如果已经有了，照常在已有的里面添

filename里面的name是个占位符，不会显示到页面上

最后，要知道在webpack中，有一个很重要的特性；模块不仅仅只是js的文件，webpack可以吧任意文件数据作为模块进行处理，包括：非js文本、css，图片等等，但是webpack默认情况下只能处理js模块，如果需要处理其他类型的模块，就需要使用它提供的一些其他功能了

我这里举个例子，比如说我新建了一个txt文档，想要把他里面的内容输出到页面上，如图

我可以现在index.js内引用data内的girl.txt，然后使用console.log方法把他输出到页面上

这样不做处理直接输出的话，txt内的内容是输出不到页面上的，如果想让他输出到页面上，我们可以去webpack.config.js内把index.js进行打包操作，如下

test内是正则，来找txt的文件后缀，找到后使用use内的loader来进行处理即可完成