webpack
什么是webpack？
webpack是一个module bundler（模块打包工具），所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块。
webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的依赖关系，所以具有更强大的JS模块化的功能，它能对静态资源进行统一的管理以及打包发布，在官网中用这张图片介绍：
为什么使用webpack？
- 对CommonJs、AMD、ES6的语法做了兼容；
- 对js、css、图片等资源文件都支持打包；
- 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对Coffee Script、ES6的支持；
- 有独立的配置文件webpack.config.js；
- 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间；
- 支持SourceUrls和SourceMaps，易于调试；
- 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活；
- webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快；
webpack适用范围？
webpack最常用与spa应用，主要是vue和React，其实它就非常像Browserify，但是将应用打包为多个文件。如果单页面应用有多个页面，那么用户只从下载对应页面的代码。当他每访问到另一个页面，他们不需要重新下载通用的代码。
webpack也能用于服务端，但是构建后端代码一般都不会用webpack，坑太多了，所以别人已经走过的坑，还是不要去踩了~~~~~并且我个人觉得后端其实也没不要这么做，因为后端更多的是处理逻辑，以及为前端提供数据......
webpack主要参数？
- require(引入模块和资源文件)
- module.exports(存放处理js,css,imgaes接口)
- entry(入口 要打包处理的js文件)
- output(出口)
- Loader(加载器)
- Plugins(插件)
entry
entry的值有三种类型
1:字符串
entry:"./app.js"
2:数组(可以多个文件打包在一起)
entry:['./src/index.js','./vendor/bootstrap.min.js']
3:对象(设置多个打包目标。每一对键值对都对应着一个入口文件。常用于多页面入口文件配置)
entry:{ index:'./src/index.js', a:'./src/a.js' }
ouuput
项目常用主要3个对象参数
1:filename: 'bundle.js'（指定打包文件名称）
[name] 被 chunk 的 name 替换。filename:'[name].js'
[hash] 被 compilation 生命周期的 hash 替换。filename:'[hash].js'
[chunkhash] 被 chunk 的 hash 替换。filename:'[chunkhash].js'
2:path:'/home/proj/pubilc/assets'(指定打包文件的位置，导出目录为绝对路径)
3:publicPath: "/assets/"(设置打包后引用资源地址)
Loader
loader 是对应用程序中资源文件进行转换。它们是（运行在 Node.js 中的）函数，可以将资源文件作为参数的来源，然后返回新的资源文件。
- css-loader(解析 css 文件后，使用 import 加载，并且返回 css 代码)
- style-loader(用于将编译完成的css插入html中的工具)
- less-loader(加载和转译 less 文件)
- sass-loader(加载和转译 sass/scss 文件)
- file-loader(将文件发送到输出文件夹，并返回（相对）URL)
- url-loader(像 file loader 一样工作，但如果文件小于限制，可以返回 data URL)
- html-withimg-loader(提取html文件中的图片)
- babel-loader(编译es6语法为es2015)
Plugins
webpack 有一个副插件接口(rich plugin interface)。webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得极其灵活。
- extract-text-webpack-plugin(把css文件提取出来为引用css地址)
- html-webpack-plugin(html模板，可以生成一个html文件)
webpack项目开发配置
1：安装node
webpack是基于 Node.js运行的，故要首先安装Node.js
- windows 需要去node官网( https://nodejs.org/en/ )在对应电脑系统32位或者64位安装图解可以看 http://www.runoob.com/nodejs/nodejs-install-setup.html
- mac 可以通过在github获取安装 终端安装命令：sudo git clone https://github.com/nodejs/node.git
2：创建项目
打开控制台找到要开发的目录 输入命令
npm init (在项目中引导创建一个package.json文件) //package.json配置参数 name: (Desktop) //包名 version: (1.0.0） //包的版本号。 description: //包的描述 entry point: (index.js) //入口文件 test command: //测试命令 git repository: //Github 地址 keywords: //关键字 author: //包的作者姓名。 //依赖包列表。如果依赖包没有安装，npm会自动将依赖包安装在node_module目录下。 dependencies
安装包的信息可保持到项目的package.json文件中，以便后续的其它的项目开发或者他人合作使用，也说package.json在项目中是必不可少的。
3：安装webpack
//全局安装webpack npm install webpack -g //当前文件夹安装 并保存在package.json包中 npm install --save-dev webpack 简写(npm i webpack D)
-save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；
-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；
4：创建webpack配置js文件
1）默认是webpack.config.js(命令行中输入webpack即可执行文件中操作)；
2）建议创建2个文件
webpack.dev.config.js 开发环境配置文件
webpack.pub.config.js 生产环境配置文件
