webpack从安装到使用
1.什么是WebPack，为什么要使用它？
官方网站：https://webpack.github.io/
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
webpack的官网首页防止了一张很形象的webpack工作原理图，在这里借用一下
Webpack的工作方式简单的来说就是：把项目当做一个整体，通过一个给定入口文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
好了理论基础就到这里，如果还需要深入了解，可以去看看看webpack官网；
2.使用webpack
2.1 使用前的准备工作
使用webpack需要在项目中安装webpack的依赖包，那么我们先新建一个文件夹，并在该文件夹下通过执行以下命令来生成一个package.json的文件；
npm init2.2 安装webpack
package.json文件已经就绪，我们在本项目中通过以下命令安装Webpack作为依赖包
// 安装Webpack
npm install --save-dev webpack安装完成之后，文件目录下会有一个package.json文件和node_modules的文件夹，接下来我问就要使用webpack来打包我们的第一个文件；
2.3 使用webpack
在项目根目录下创建一个hello.js的文件；
//hello.js
function hello(str){
alert(str);
}然后在终端内输入打包命令
webpack hello.js hello.bundle.js执行命令后，结果却报错了，怎么回事呢？原来，是我安装的webpack版本属于高版本，webpack在4.x版本以后，打包命令就变成了：
webpack hello.js -o hello.bundle.js其中 hello.dundle.js是打包后生成的文件的文件名;
命令执行成功后，会看到在项目目录下已经有了hello.bundle.js；
同时，在终端中会显示关于打包的一些参数
其中的一些参数值:
Version:webpack版本
time:这次打包所花费的时间
列表信息
Asset:打包这次生成的文件
Size:这次生成文件的大小
Chunks:这次打包的分块
chunk Names:这次打包的名称
虽然文件已经打包好了，但是在中断中，还时出现了网色的WARNING；内容如下：
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
出现警告的原因是因为webpack4引入了模式，模式包含开发模式、生产模式、无这三个状态；而我们再项目中没有设置模式；
解决这个问题的方法很简单；
在package.json中添加一段代码，来设置模式；
代码如下：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode deveplopment",
"build": "webpack --mode production"
},
之后，我们通过命令安装webpack-cli；
npm install webpack-cli --save-dev安装完成后, 输入命令 npm run dev；
注：关于 npm run dev和npm run build;
npm run dev (开发环境输出的demo.js没有压缩);
npm run build (生产模式输出的demo.js压缩过);
执行完成npm run dev 命令后，发现终端又报错了；这次的错误内容如下：
Invalid values:
Argument: mode, Given: "deveplopment", Choices: "development", "production", "none"
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack --mode deveplopment`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\QQ\AppData\Roaming\npm-cache\_logs\2018-10-24T08_34_40_908Z-debug.log
错误原因是：
当我们输入命令 npm run dev 的时候,会默认打包src文件夹下的index.js文件,打包完成后是main.js文件(放在dist),你有没有发现我们一开始安装webpack的时候并没有这个文件,也没有index.js文件,所以这些我们需要手动创建；
先创建src文件.还有一个dist文件,存放默认的打包生成的文件, 然后在src里再创建index.js文件.
创建好文件后我们再打包一次，如果打包还有黄色的警告请使用下面的打包命令
npx webpack ./hello.js -o hello.bundle.js --mode development命令执行完成后，发现在dist文件夹内已经生成了mian.js文件，终端也没有再出现黄色警告：
注：如果想一边写,代码自动打包 使用这个命令
npx webpack --mode development --watch注意: 这个命令只是单纯监听了默认的打包路径,也就是能监听到src下index.js的变化,也能够随将变化时进行保存刷新后其自动打包,但是,并不能监听到hello.js. 还有就是你的执行这个命令的时候,它必需属于一直监听的状态, 如果被停止了,那监听状态也停止。
webpack的安装与简单实用就这么多，后期还会更新更进一步的使用。