webpack4教程（番外篇）

目录
一、优化，提升打包速度
二、跨域—代理转发
三、兼容性处理
四、PWA
五、持续更新......

系列教程
webpack4教程（初识篇）
webpack4教程（入门篇）

---

一、优化，提升打包速度

1、多线程打包

//以js为例
//const Happypack = require('happypack')
module: {
  rules: [
    {
      test: /\.js$/,
      use: 'Happypack/loader?id=js'
    }
  ]
},

plugins: [
  id: 'js',
  use: []    //设置js的loader配置
]

PS：大项目效果明显，小项目反而增加耗时（插件编译耗时，大于优化时间）。

2、其他优化方式

（1）取消解析依赖关系

module: {
  noParse: /模块名/    //例如：JQuery本身无依赖，可以不解析其依赖关系
}

（2）缩小模块查找范围

//const path = require('path')
module: {
  rules: [
    {
      test: ,
      use: ,
      include: path.resolve('src')    //只在src目录查找
      //或者exclude: /node_modules/    //不在node_modules目录查找
    }
  ]
}

（3）不引人指定文件

//以moment时间库为例，locale目录中包含大量的语言包，取消引入该部分，另外手动引入指定语言包（中文）
new webpack.IgnorePlugin(/\.\/locale/, /moment/)

3、官方文档

官方文档-构建优化

---

二、跨域—代理转发

devServer: {
  proxy: {
    'api': {
      target: '接口地址',
      //请求时，带上api路径层；转发时，去除api路径层。防止接口没有统一目录的情况
      pathRewrite: {
        'api': ''
      }   
    }
  }
}

---

三、兼容性处理

1、模块js、普通js互转

（1）模块js，转普通js

plugins: [
  new webpack.ProvidePlugin({
    //使用_，可以在全局直接访问lodash，无需导入模块。（webpack隐式导入）
    _: 'lodash'
  })
]

（2）普通js，转模块js

module: {
  rules: [
    {
      test: require.resolve('globals.js'),
      //暴露globals.js的file、helpers.parse，可以通过import {file, parse} from './globals.js'获取
      use: 'exports-loader?file,parse=helpers.parse'
    }
  ]
},

PS：普通js——没有进行模块化操作，只提供全局变量。

2、提取模块api

new webpack.ProvidePlugin({
  //获取lodash中的join api，随后调用join()，只会使用lodash提供的。（有助于tree-shaking）
  join: ['lodash', 'join']
})

3、把this指向window

module: {
  rules: [
    {
      test: require.resolve('index.js'),
      use: 'imports-loader?this=>window'
    }
  ]
},

4、babel-polyfill使用

（1）直接使用（推荐）

import 'babel-polyfill'

（2）选择性使用

//配置文件
entry: {
  polyfills: './src/polyfills.js',
  index: './src/index.js'
},
output: {
  filename: '[name].bundle.js',
  path: path.resolve(__dirname, 'dist')
}

//index.html
<script>
  //判断是否为现代浏览器
  var modernBrowser = (
    'fetch' in window &&
    'assign' in Object
  )
  
  //选择性加载babel-polyfill
  if ( !modernBrowser ) {
    var scriptElement = document.createElement('script')
    scriptElement.async = false
    scriptElement.src = '/polyfills.bundle.js'
    document.head.appendChild(scriptElement)
  }
</script>

---

四、PWA

1、启动本地服务器，测试PWA

//package.json
"start": "http-server dist"

2、添加workbox

new WorkboxPlugin.GenerateSW({
  // 这些选项帮助快速启用 ServiceWorkers
  // 不允许遗留任何“旧的” ServiceWorkers
  clientsClaim: true,
  skipWaiting: true
})

3、注册service worker

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js').then(registration => {
      console.log('SW registered: ', registration)
    }).catch(registrationError => {
      console.log('SW registration failed: ', registrationError)
    })
  })
}

4、断开服务器，查看应用是否正常。

正常的话，则代表正在由service worker提供服务