webpack

webpack是一个资源模块化管理及打包工具。它能将许多松散的模块及其依赖项打包为一个适合于生产的前段资源。它的代码拆分功能还可以对所要加载的模块进行分割，待程序需要的时候再加载所需内容。通过loaders(加载器)，让你可以加载任何模块或资源，如：可以是CommonJS、AMD、ES6等模块，可以是CSS、image、JSON、Coffeescript、LESS等资源，也可以是自己定义的内容。

简介

webpack是一个模块打包器。它的主要目的是把javascript文件捆绑到浏览器环境中使用，也能够支持转换、绑定、或者打包任何形式的资源。它会根据模块的依赖关系进行静态分析，然后将这些模块按指定的规则生成对应的静态资源。

• 打包模块可以是CommonJS或者AMD模块
• 可以创建为一个打包文件或者运行时异步加载的多个文件
• 编译过程中解决依赖关系，减少运行时间
• 加载器可以在编译过程中预处理文件，如：把突变转换为base64编码的字符串
• 充足的插件

优势

• 代码分割
  webpack支持两种依赖加载:同步和异步。同步的依赖会在编译时直接打包输出到目的文件中，异步的依赖会单独生成一个代码块，只有在浏览器中运行需要的时候才会异步加载该代码块。
• webpack是以commonJS形式来书写脚本的，同时支持AMD、CDM等加载规范
• 能被模块化的不仅仅是js了。webpack是将各种资源都以模块的形式处理
• 可以代替部分grunt/gulp的工作，比如打包、压缩混淆、图片转bsae64等
• 扩展性强，插件机制完善，当我们发现webpack内置的功能不能满足我们的构建需求时，我们可以通过使用插件来提高工作效率
• Loaders 在默认的情况下，wenpack智能处理JS文件，但是我们可以通过加载器将其他类型的资源转换为JS输出
• 可以基于配置或者智能分析打包成多个文件，实现公共模块或者按需加载
• 发开时在内存中完成打包，性能更快，完全可以支持开发过程的实时打包需求

配置

content - 运行目录

entry选项所使用的基础目录(绝对路径).如果设置output.pathinfo,则是路径到这个目录的简短形式

默认: process.cwd() // 貌似在没有怎么用过

entry - 入口点

打包文件的入口点，值可以是字符串、数组或对象

• 字符串
  直接指定路径，该路径相对于content选项

entry: './entry'

字符串被解析为一个模块，改模块会在启动时加载

• 数组
  路径数组，webpack会按序打包，但是导出最后一个文件

entry: ['./entry1', './entry2']

所有的模块都会在启动时加载，并导出最后一个

• 对象
  键名为块名，可随意指定，键值可以为字符串或数组类型。该块名可以在output选项中使用

entry: {    entry1: './entry1',    entry2: ['./entry2', './entry3']},output: {    // 当使用多个入口文件时    // 确保output.filename中使用[name]或[id]    // 打包后输出文件名，name对应entry中的键名    filename: '[name].build.js',    chunkFilename: '[id].build.js'}

output - 输出设置

编译后的输出设置，该项会告诉webpack怎样将编译后的文件写入磁盘。虽然可能有多个entry(入口文件)，单输出配置只有一个。
如果使用哈希([hash]或[chunkhash])，应该确保其与模块顺序一致。使用0ccurence0rderPlugin或recordsPath
output.filename - 输出文件名
指定硬盘上每个输出文件的文件名。这里不能使用绝对路径，二应该通过output.path来指定输出路径

• 单个入口

entry: './src/entry.js',output: {    filename: '[name].build.js',    path: './dist'}// 会写入: ./dist/entry.build.js

• 多个入口
  如果创建多个’块’时，应该使用下面来命名输出文件，确保生产文件的唯一性:
  [x] [name] - 会代替每个分块的名称
  [x] [hash] - 被编译的哈希值所代替
  [x] [chunkhash] - 被分块的哈希值所代替

entry: {    entry1: './entry1.js',    entry2: './entry2.js'},output: {    filename: '[name].build.js',    path: __dirname + '/dist'}// 会写入: ./dist/entry1.build.js, ./dist/entry2.build.js

output.path - 输出文件目录
设置输出文件的绝对路径(必须)

• [hash] - 被编译的哈希值所代替

output.publicPath - 访问路径
publicPath 用于设置输出文件在浏览器环境访问中的路径，即: URL。对于loader来说这是一个内嵌的<script> 或 <link> 标签或一个图片资源，publicPath 作为问价你的herf或url()链接。当你输出文件不在同一台主机或在一个CDN上输出的时候，这一选项会非常有用。
使用示例: config.js

output: {    path: __dirname + '/dist',    publicPath: './static/'}

index.html

<link href="/static/xxx.css"></link>

用于设置非入口分块的文件名，文件名是相对output.path目录的相对路径
- [id] - 代替文件的ID
- [name] - 代替文件名
- [hash] - 被编译的哈希值所代替
- [chunkhash] - 被文件的哈希值所代替

module - 模块加载相关配置

module.loaders - 加载器数组
当依赖文件匹配指定的test模式时,webpack会自动调用数组中相应的加载器去处理该文件，然后返回JS格式的文件
加载器是一个对象，拥有以下属性:

• test - 正则表达式,webpack用其去匹配相应的文件，通常用来匹配文件的后缀
• exclude - 不应该loader处理的文件
• include - 一个路径数组，这些路径将会被loader处理
• loader - test匹配到的文件对应的加载器，值是一个加载器名字的字符串，多个加载器之间用! 分开

module: {    loaders: [        {            test: /\.vue$/, // 匹配vue文件            loader: 'vue', // 调用vue-loader            exclude: './dist/xxx.vue' // 过滤处理的文件，基本不会用到这个属性            include: [ // 使用vue-loader处理一下的文件                path.resolve(__dirname, 'src/views/login'),                path.resolve(__dirname, 'src/views/main'),            ]        }    ]}