一、webpack 的概念和基础使用
1.安装和使用
全局安装 npm install webpack webpack-cli -g
依赖安装 npm init npm install webpacl -D
2.npm scripts npm 脚本
npm允许在package.json 文件里面，使用scripts字段定义脚本命令
{
"scripts": {
"build" : "node build.js"
}
}
上面代码时package.json文件的片段，里面的scripts字段是一个对象.它的每一个属性，对应一段脚本。比如，build命令对应的脚本是node build.js
命令行下使用npm run 命令,就可以执行这段脚本。
$ npm run build #等价于 $ node build.js
这些定义在package.json里面的脚本，就称为npm脚本.
3.入口
在多个代码模块中会有一个起始的.js文件,这个便是webpack构建的入口.
webpack会读取这个文件，并从它开始解析依赖，然后进行打包。
一般情况下webpack默认的入口文件就是./src/index.js.
4.loader(装载机)
webpack中提供一种处理多种文件格式的机制，便是使用loader.我们可以把loader理解
成一个转换器，负责把某种文件格式的内容转换成webpack可以支持打包的模块.
在没有添加额外插件的情况下，webpack会默认把所有依赖打包成js文件,如果入口文件
依赖一个.hbs的模板文件以及一个.css的样式文件,那么我们需要handlebars-loader来处理
.hbs文件,需要css-loader来处理.css文件，最终把不同格式的文件都解析成js代码,
以便打包后在浏览器中运行。
5.plugin(插件)
在webpack的构建流程中，plugin用于处理更多其他的一些构建任务。可以这么理解，模块代码
转换的工作由loader来处理，除此之外的其他任何工作都可以交由plugin来完成。通过添加我们
需要的plugin，可以满足更多构建中特殊的需求。例如，要使用压缩JS代码的
uglifys-webpack-plugin插件，只需在配置中通过plugins字段添加新的plugin即可
除了压缩JS代码的uglifyjs-webpack-plugin,常用的还有定义环境变量的DefinePlugin，
生成css文件的ExtractTextWebpackPlugin等.
6.输出
webpack的输出即指webpack最终构建出来的静态文件。
7.各种玩具
html-webpack-plugin 会为我们创建一个html文件,其中会引用构建出来的JS文件。
实际项目中，默认创建的HTML文件并没有什么用，我们需要自己来写HTML文件，
可以通过html-webpack-plugin的配置传递一个写好的html模板
css-loader 负责解析css代码,主要是为了处理 CSS 中的依赖，例如 @import 和 url()
style-loader 会将css-loader解析的结果变成js代码,运行时动态插入style标签
让css代码生效
extract-text-webpack-plugin 可以单独将css文件分离出来