webpack

什么是webpack？

　　webpack是一个module bundler（模块打包工具），所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块。

　　webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的依赖关系，所以具有更强大的JS模块化的功能，它能对静态资源进行统一的管理以及打包发布，在官网中用这张图片介绍：

为什么使用webpack？

1. 对CommonJs、AMD、ES6的语法做了兼容；
2. 对js、css、图片等资源文件都支持打包；
3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对Coffee Script、ES6的支持；
4. 有独立的配置文件webpack.config.js；
5. 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间；
6. 支持SourceUrls和SourceMaps，易于调试；
7. 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活；
8. webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快；

webpack适用范围？

　　webpack最常用与spa应用，主要是vue和React，其实它就非常像Browserify，但是将应用打包为多个文件。如果单页面应用有多个页面，那么用户只从下载对应页面的代码。当他每访问到另一个页面，他们不需要重新下载通用的代码。

　　webpack也能用于服务端，但是构建后端代码一般都不会用webpack，坑太多了，所以别人已经走过的坑，还是不要去踩了~~~~~并且我个人觉得后端其实也没不要这么做，因为后端更多的是处理逻辑，以及为前端提供数据......

webpack主要参数？

1. require(引入模块和资源文件)
2. module.exports(存放处理js,css,imgaes接口)
3. entry(入口  要打包处理的js文件)
4. output(出口)
5. Loader(加载器)
6. 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 中的）函数，可以将资源文件作为参数的来源，然后返回新的资源文件。

1. css-loader(解析 css 文件后，使用 import 加载，并且返回 css 代码)
2. style-loader(用于将编译完成的css插入html中的工具)
3. less-loader(加载和转译 less 文件)
4. sass-loader(加载和转译 sass/scss 文件)
5. file-loader(将文件发送到输出文件夹，并返回（相对）URL)
6. url-loader(像 file loader 一样工作，但如果文件小于限制，可以返回 data URL)
7. html-withimg-loader(提取html文件中的图片)
8. babel-loader(编译es6语法为es2015)

Plugins

　　webpack 有一个副插件接口(rich plugin interface)。webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得极其灵活。

1. extract-text-webpack-plugin(把css文件提取出来为引用css地址)
2. html-webpack-plugin(html模板，可以生成一个html文件)

webpack项目开发配置

1：安装node

webpack是基于 Node.js运行的，故要首先安装Node.js

1. windows 需要去node官网( https://nodejs.org/en/ )在对应电脑系统32位或者64位安装图解可以看 http://www.runoob.com/nodejs/nodejs-install-setup.html
2. 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 生产环境配置文件