Webpack 做项目
1 . 创建一个文件夹，并创建以下文件夹：
Css、js、 src、 dist、images
Note:
src里面放index.html，和js的入口文件‘main.js’
dist里面将会生成webpack打包‘mian.js’后的文件
2．Npm对项目的初始化，运行：npm init –y；
会生成一个package.json文件，用来记录项目中通过npm下载调用的插件，
如：‘jquery.js’、‘bootstrap.js’
3.如果要用到jquery，则在控制台或者项目根目录下运行npm install jquery –S
‘-S’是用来将该文件依赖写入到package.json文件。
4. 在main.js文件里导入需要的插件，如：import $ from jquery,接着就可以在该文件写js代码了
5.用webpack打包写好的main.js代码文件，
运行 webpack main.js(路径) -o dist/bundle.js
Note: 因为打包编译在写代码的时候会频繁操作，不可能每次都手动去输入命令进行打包，所以在根目录下创建一个’webpack.config.js’文件，具体配置查看官网;
6.上面的配置文件配置好后，运行命令webpack就可以就行打包了。
7．为了自动打包，我们可以安装一个工具 ‘webpack-dev-server’,
运行 npm i webpack-dev-server –D
安装好后，配置package.json文件，如下：
如果这个工具要正常运行，必须在本地安装webpack，哪怕在全局已经安装过都不行。
8.运行：npm run dev就可以自动打包了；
打包好的文件可以http://localhost:8080/bundle.js访问查看
这个bundle按照上面的地址来看，是在根目录下，但是会找不到这个文件，其实webpack把这个文件存到了内存中，以虚拟的形式托管到了项目的根目录中，虽然看不到，但是他和node_module文件夹平级，存到了内存中主要是为了快！！
9.可以设置
打包后自动直接打开浏览器，也可以设置端口号，定义打开的路径src
Hot可以让页面无刷新重载，而且只打包main.js文件里更新的代码部分，这样速度更快
10.html-webpack-plugin插件
这个插件可以将页面生成到内存中去，并且我们原来的页面不需要再引入js，因为在内存中生成的页面会自动在页面中引入js.
安装：npm intall html-webpack-plugin
安装好后在webpack.config.js中配置该插件
11.webpack只能打包js文件，不能打包css文件，如果需要打包，我们需要安装一款处理样式表的插件，运行：npm I style-loader css-loader -D
打开webpack.config.js文件，在里面新增一个配置节点，叫做module,他是一个对象，在这个module对象上，有一个rules属性，这个属性是个数组，这个数组中存放了所以第三方文件的匹配和处理规则
Noted:还有图片、字体的第三方的loader处理，这里就不多说了
12.Webpack只能处理ES6的一部分语法，ES7不支持，所以要借助第三方的loader来处理，Babel就可以处理
运行：npm i babel-core babel-loader babel-plugin-transform-runtime –D
再运行：npm i babel-preset-env babel-preset-stage-0 -D
安装完后配置webpack.config.js文件，如下：
然后在项目的根目录下新建一个‘.babelrec’的babel的配置文件，这个文件的语法满足json格式
Note：具体的babel配置必须查看官网