项目

使用的库

• webpack 3.6.0
• loader
  • eslint-loader 1.7.1
  • vux-loader 1.2.9 对.vue代码进行预处理
    • vux-loadersrcjs-loader.js
  • vue-loader 13.0.5 允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件
  • vue-style-loader 3.1.2 加载样式模块，最后通过 <style> 标签把样式加载到页面
  • css-loader 0.28.11 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
  • less-loader 4.0.6、sass-loader 6.0.7、stylus-loader
  • @kazupon/vue-i18n-loader 0.3.0 .vue文件中使用<i18n>标签
  • happypack/loader?id=happy-babel-vue 插件下的处理器
  • babel-loader 7.1.5
  • url-loader 0.5.9 在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL
• plugin
  • progress-bar-webpack-plugin 1.11.0 在编译期间报告进度
  • happypack 4.0.1 多线程插件
  • webpack.LoaderOptionsPlugin webpack 1 迁移至 webpack 2时， loader 升级为依靠直接传递给它的配置选项运行，可以通过这个插件配置全局/共享的 loader 配置，使所有的 loader 都能收到这些配置。
  • webpack.LoaderOptionsPlugin 有的 loader 需要从配置中读取一些 context 信息。在未来很长一段时间里，这将需要通过 loader options 传入。为了保持对旧 loaders 的兼容，这些信息可以通过插件传进来
  • DonePlugin webpack打包完毕触发的hooks（应该是 webpack.DonePlugin）
  • webpack.DefinePlugin 允许在 编译时 将你代码中的变量替换为其他值或表达式。这在需要根据开发模式与生产模式进行不同的操作时，非常有用
  • webpack.HotModuleReplacementPlugin 模块热替换插件
  • webpack.NoEmitOnErrorsPlugin 在编译出现错误时，来跳过输出阶段
  • friendly-errors-webpack-plugin 1.7.0 有好的错误提示
  • copy-webpack-plugin 4.0.1 将已存在的单个文件或整个目录复制到构建目录中
  • html-webpack-plugin 2.30.1 简化了 HTML 文件的创建
  • optimize-css-assets-webpack-plugin 3.2.1 生产环境才有，压缩 css
  • webpack-parallel-uglify-plugin 1.0.2 生产环境才有，多线程压缩
  • autodll-webpack-plugin 0.3.9 生产环境才有，外部依赖不再编译提高编译速度
  • webpack.HashedModuleIdsPlugin 生产才有，该插件将根据模块的相对路径生成哈希值，生成一个四字符的字符串作为模块 id
  • webpack.optimize.ModuleConcatenationPlugin 生产才有，过往会把每个模块封在一个函数内，现在能把多个模块封在一个函数中减少代码量提高运行速度
  • webpack.optimize.CommonsChunkPlugin 生产才有，抽取多个 chunk 或 blund 的公共部分，抽取第三方依赖
  • compression-webpack-plugin gzip压缩
  • webpack-bundle-analyzer 2.9.2 打包文件分析工具

————————————————————————

配置项

• module
  • noParse 不解析
  • rules 处理器数据，从后到前执行
    • test 匹配的模块名
    • loader 使用的 loader
    • enforce 处理顺序
    • include 指定需要处理的文件
    • exclude 排除的文件，优先级最高
    • options loader的配置项
    • use 应用于模块的 UseEntries 数组（应该同rules）
    • query loader的配置项 options 属性的别名
    • path 没有找到文档，可能跟 loader 一样
• plugins 插件
• entry 定义入口（一个入口默认为一个chunk）
• output
  • path 输出地址
  • filename 输出文件名，可以根据入口名定义
  • publicPath 资源的相对html的路径
  • chunkFilename 用来打包require.ensure方法中引入的模块,如果该方法中没有引入任何模块则不会生成任何chunk块文件
• resolve 配置模块如何解析，比如按照什么规则查找模块
  • extensions 告诉解析器在解析中能够接受那些扩展名
  • modules 查找模块的目录
  • alias 模块路径的别名
• node 配置是否 polyfill 或 mock（虚拟） 某些 Node.js 全局变量和模块。这可以使最初为 Node.js 环境编写的代码，在其他环境（如浏览器）中运行。此功能由 webpack 内部的 NodeStuffPlugin 插件提供。其中每个属性都是 Node.js 全局变量或模块的名称
  • setImmediate
  • dgram
  • fs
  • net
  • tls
  • child_process
• devtool 此选项控制是否生成，以及如何生成 source map。
• devServer
  • clientLogLevel 日志输出级别
  • historyApiFallback 当使用 HTML5 History API 时的重定向规则
    • rewrites 重定向规则
  • hot
  • contentBase 告诉服务器内容的来源。仅在需要提供静态文件时才进行配置。默认情况下，它将使用当前的工作目录来提供内容。
  • compress 为每个静态文件开启 gzip compression
  • host
  • port 端口号
  • disableHostCheck 跳过 host 检查。这是不推荐的因为不检查 host 的应用容易受到 DNS 重新绑定攻击。
  • open 告诉 dev-server 在服务器启动后打开浏览器。
  • overlay 出现编译器错误或警告时，在浏览器中显示全屏覆盖。
  • publicPath 建议 devServer.publicPath 与 output.publicPath 相同
  • proxy 请求代理
  • quiet 除了初始启动信息外，什么都不会写入控制台。 这也意味着来自 webpack 的错误或警告是不可见的
  • watchOptions 控制监听文件的选项
    • poll 是否轮训监听文件变化

————————————————————————

loader 配置项

eslint-loader

• formatter
• emitWarning 是否抛出错误

vue-loader

• loaders .vue文件各块处理器
• cssSourceMap 新版已废弃，应该是生成代码映射关系的
• cacheBusting 清空缓存？
• transformToRequire 新版改名为 transformAssetUrls，在模板编译过程中，编译器可以将某些特性转换为 require 调用，例如 src 中的 URL。因此这些目标资源可以被 webpack 处理。能够配置对不同特性的处理方法

css-loader

• minimize 压缩
• sourceMap 代码映射

babel-loader

• compact 生成代码时，是否省略所有可选的换行符和空格

url-loader

• limit 文件大小，小于该大小的才处理成 DataURL
• name 生成的文件路径及名称

————————————————————————

plugin参数

progress-bar-webpack-plugin

• format 进度信息格式化

happypack

• id 用来区分 happypack 实例，比如把 js 文件交给某个实例处理
• loaders 用法和 webpack Loader 配置中一样
• threads 代表开启几个子进程去处理这一类型的文件，默认是3个
• verbose 是否允许 HappyPack 输出日志，默认是 true。

webpack.DefinePlugin

new webpack.DefinePlugin({
  'process.env': config.dev.env
})

copy-webpack-plugin

• from 拷贝来源
• to 拷贝目标地址
• ignore 忽略

html-webpack-plugin

• filename 生成出来的html文件名
• template html的模版
• inject 自动将引用插入html
• chunks 每个html引用的js模块，也可以在这里加上 vendor 等公用模块
• minify 压缩
• chunksSortMode 依赖的加载顺序，即在 html 中的排列顺序

friendly-errors-webpack-plugin

• compilationSuccessInfo 运行成功
• onErrors 运行错误

optimize-css-assets-webpack-plugin

• cssProcessor 用于优化最小化 CSS 的 CSS 处理器，默认为 cssnano
• cssProcessorOptions 传递给cssProcessor的配置对象

webpack-parallel-uglify-plugin

• cacheDir 缓存路径、没有不会缓存
• uglifyJS uglify-js 的参数
• sourceMap

autodll-webpack-plugin

• inject 将外部报注入index.html
• debug 是否使用调试模式
• filename
• path
• entry DLL 的入口点

webpack.optimize.CommonsChunkPlugin

• name 提取后块的名称
• minChunks 可提取块的规则
• chunks 声明要提取的块

compression-webpack-plugin

• asset
• algorithm 压缩算法
• test 需要压缩的文件的匹配规则
• threshold 只处理比这个值大的资源
• minRatio 只有压缩率比这个值小的资源才会被处理

webpack-bundle-analyzer

• analyzerPort 软件包报告所用的服务端口

————————————————————————

node 库

• webpack-merge 合并配置文件的工具
• chalk 控制台打印样式库
• portfinder 进程端口
• glob 使用规则，从而获取对应规则匹配的文件
• rimraf 用来删除文件或文件夹
• parallel-webpack 并行地运行多个 webpack 构建，将工作分散到处理器中