webpack4配置vue项目环境

• 参考1
• 参考2
• 参考3

  构建完毕结构一览

  

功能一览

css/sass/less相关

插件

• cache-loader（放最后）
• thread-loader（它前面的loader用一个worker池）
• vue-style-loader（动态切换，它是style-loader在vue项目中的代替，它配置在sass、less模块中也会对它们产生的css处理，普通的 .scss 文件和 *.vue 文件中的<style lang="scss"> 块都应用它）
• mini-css-extract-plugin（动态切换）
• css-loader
• postcss-loader（要放在sass、less等后面调用）

• sass-loader/less-loader（注意sass-loader需要依赖node-sass）

  基本实现

• css添加前缀，抽提与处理同步、异步的样式表，哈希标记

• 根据运行环境切换不同插件

• 利用缓存加速构建与打包

  图片，字体，媒体文件相关

  插件

• cache-loader

• thread-loader
• file-loader

• url-loader（先使用它，如果超过设置的大小限制就调用file-loader）

  基本实现

• 缓存

• 哈希标记

• 动态打包

  HTML相关

  插件

• html-webpack-plugin（主要使用它引入一些模板，当使用不同的模板时，也要加载不同的loader处理，还有就是，存在多入口时，要利用chunks属性一一标记，每个入口新建新插件）

  基本实现

• 多入口

• 模板文件

  JS相关

  插件

• cache-loader（放在最后）

• babel全家桶：

1. babel-loader将es6等高级语法转低级语法，注意只会转换语法，对全新api不转换，需借用垫片babel-polyfill
2. @babel/core是babel的核心模块，编译器，提供转换的api
3. babel/preset-env可以根据配置的目标浏览器或者运行环境将es5+的代码转换为es5，它要和前面两个结合用

4. babel/polyfill转化api，它的用法很奇怪，要在上面entry处，（后续版本已慢慢弃用）

   例如：entry：[‘@babel/polyfill’,path.resolve(_dirname,’../src/index.js’)] 这样子使用
   推荐：@babel/preset-env配置选项，useBuiltIns: ‘usage’ ，搭配core-js，在使用了新语法的js文件顶部，动态 按需引入core-js/modules里头的模块参考

5. babel/runtime提供统一模块化的helper，减少其重复输出，减少打包编译后的体积

6. babel/plugin-transform-runtime会帮助自动require @babel/runtime中的内容
7. @babel/plugin-proposal-decorators将es6+中更高级的特性转化，如装饰器
8. @babel/plugin-proposal-class-properties将es6中更高级的api进行转化如 类

• happypack（注意它和thread-loader冲突，只能用一个，它用node的os模块调取本地线程池，将js的打包变为并行操作，文件多的时候效果体现较好，文件少没必要配置，与loader对应的id相匹配，插件内注意是loaders，内部用法和loader一样，happypack还可以对css，图片什么的打包，一个类型新建新的插件，类似HtmlWebpackPlugin用法）

  基本实现

• 多入口

• 模板文件

  .VUE文件相关

  插件

• vue-loader

• cache-loader

• thread-loader

  基本实现

• vue文件的处理

  其他

  clean-webpack-plugin

  webpack-dev-server

  区分开发环境与生产环境（调用不同插件）

  缩小文件的搜索范围(配置include exclude alias noParse extensions)

  使用HappyPack开启多进程Loader转换

  webpack内置的DllPlugin DllReferencePlugin进行抽离第三方公共模块

  配置缓存与thread-loader工作池

  引入webpack-bundle-analyzer分析打包后的文件（打包可视化）

  未实现功能

  externals（排除CDN引用打包，未使用）

  使用webpack-parallel-uglify-plugin 增强代码时间压缩（未使用）

  Tree-shaking（报错）

  动态配置打包入口文件

// 使用 glob 等工具使用若干通配符，运行时获得 entry 的条目
module.exports = {
  entry: glob.sync('./project/**/index.js').reduce((acc, path) => {
    const entry = path.replace('/index.js', '')
    acc[entry] = path
    return acc
  }, {}),
}

则会将所有匹配 ./project/**/index.js 的文件作为入口文件进行打包，如果你想要增加一个子项目，仅仅需要在 project 创建一个子项目目录，并创建一个 index.js 作为入口文件即可。
这种方式比较适合入口文件不集中且较多的场景。

动态打包某一子项目

浏览器缓存与 hash 值讨论

打包成库（目前就别想了）

mode讨论

配置解析策略 resolve讨论

配置解析和转换文件的策略 module

配置优化 optimization（webpack4）

watch 与 watchOptions