项目

使用的库

  • 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 构建，将工作分散到处理器中
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/qq3279338858/p/15102543.html