4-1 Library 的打包

除了打包应用程序代码，webpack 还可以用于打包 JavaScript library
前面的步骤跟普通的打包工程项目一致，先npm init -y初始化文件夹，帮助我们将这个文件变成node_module

// package.json
{
  "name": "library",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/library.js",  // 入口文件是打包后的dist目录下的library.js文件
  "scripts": {
    "build": "webpack"
  },
  "author": "yose",
  "license": "MIT",
  "dependencies": {
    "lodash": "^1.0.0",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  }
}

创建一个名为library的库，里面有一些计算方法和字符串处理的方法

// webpack.config.js
const path = require('path');

module.exports = {
    mode: "production",
    entry: './src/index.js',
    externals: ["lodash"],    // 打包的时候忽略lodash，业务上加载lodash，但是必须将lodash命名为lodash
    // externals: {
    //     lodash: {
    //         root: '_',          // 全局script标签变量定义为“_”
    //         commonjs: 'lodash'  // 如果这个库在commonjs环境下使用，
    //     }
    // },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'librart.js',
        library: 'root',   // 挂载在全局library变量上，一般写root，让该库可以通过script标签加载
        libraryTarget: 'umd'  // 通用库，兼容commonjs,seajs等语法
    }
}

// math.js
export function add(a, b){
    return a + b;
}

export function minus(a, b){
    return a - b;
}

export function multiply(a, b){
    return a * b;
}

export function division(a, b){
    return a / b;
}

// string.js
import _ from 'lodash';

export function join(a, b) {
    return _.join([a, b], " ");
}

// index.js
import * as math from './math';
import * as string from './string';

export default {math, string};

开发完后执行npm adduser，输入账号密码后，执行npm publish就能将自己的项目添加到npm的仓库上去
能力不足，我还达不到造轮子的能力，所以这块就不深究了，点到即可

4-2 PWA 的打包配置

PWA是Progressive Web App的英文缩写，也就是渐进式增强WEB应用。
要搭建pwa，可是使用workboxl来简化我们一系列的操作
执行npm i workbox-webpack-plugin -S进行安装
由于我们只需要在线上环境运用pwa，所以我们只更改webpack.prod.js

const WorkboxPlugin = require('workbox-webpack-plugin');

plugins: [
    new WorkboxPlugin.GenerateSW({  // serviceWorker
        clientsClaim: true,
        skipWaiting: true
    })
]

// index.js
console.log("this is a pwa");

if('serviceWorker' in navigator){
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
            .then(registration => {  // 注册成功返回值
                console.log('service-worker registed');
            }).catch(error => {
                console.log('service-worker registed error');
            })
    })
}

这里要验证又需要使用http-server来模拟了，前面vue里有说过这里为就不再重新说了，也可以自行百度，反正很简单。为了方便这里在命令行里加入一个start-server命令（记得先把本地文件执行webpack打包，因为这里直接将服务开启在dist目录里）

// package.json
"scripts": {
    "start-server": "http-server dist"
}

先运行本地服务器，正常启动后访问页面，此时页面执行出console.log，关闭本地服务，继续访问，此时虽然服务已经关闭，但也没依然能正常执行出console.log
由于开启的http-server并不会自动识别index.html，所以记得浏览器地址加上/index.html，比如完整地址：http://127.0.0.1:8080/index.html

4.3 TypeScript 的打包配置

由于还没学typeScript，这节先不看了，否则记录了也不懂，先跳过

4.4 使用 WebpackDevServer 实现请求转发

这节直接参考vue即可，即路由转发，前面其实也说到过了，这里也不再重复记录。其实就是使用 devServe
的proxy，具体参数官网看一下就会了
底层实际是使用了 webpack-dev-middleware，所以也需要进行阅读

4.5 WebpackDevServer 解决单页面应用路由问题

对于 Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于改变视图的同时不会向后端发出请求。
路由的实现由两种方式，一种是hash，另外一种是history
hash，就是我们平时所说的锚点，hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面
history，利用了HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。history模式，会出现404 的情况，因此需要在webpack中进行配置
history 需要使用的是devServer中的 historyApiFallback，大部分文档里看一下就懂了，有个注意的点，to当中的路径是不能带.的，也就是 to: './dist/list'需要写成 to: '/dist/list'
关于vue的vue-router配置，也可以参考该文章：vue-router（路由）详细教程

4.6&4.7 ESLint在webpack中的配置

关于ESLint和ESLint使用上的痛，只有经历过的同学才懂（代码写完，eslint通不过，一直在改代码格式）。vscode也支持eslint插件，用于约束代码书写规范，而这里只讲webpack中的ESLint

4.8~4.11 webpack 性能优化

跟上技术迭代（Node，npm，Yarn）
在尽可能少的模块上应用Loader
Plugin尽可能精简并确保可靠（尽可能使用官网推荐的插件）
resolve参数合理配置（module.exports中的resolve，省略相关文件字段，自动搜索）

// 比如下面这些，需要合理使用
module.exports = {
    resolve: {
        extensions: ['.js', '.jsx'],
        mainFiles: ['index', 'child'],  //直接在引入文件的时候只写路径，让wenpack自动帮我们搜索名为index或child的文件
        alias: {  // 别名
            child: path.resolve(__dirname, '../src/child')  // 这里直接将组件起别名
        }
    }
}