快速使用 PWA

根据官网上的推荐简单配置一下就行了。

配置 typescript

使用第三方库时，需要安装对应的类型库，不然不会提示。比如@types/jquery，可以在如下网站中查看有哪些 types
http://microsoft.github.io/TypeSearch/

单页面路由访问提示找不到资源

比如我们使用的是单页面模式，BrowserRouter的方式，当我们根据路由去访问页面时，可能会提示找不到资源的情况，比如访问http://localhost:8000/list，提示找不到list；因为是单页面应用，所以只有 index.html 页面
配置 devServer 来解决

historyApiFallback: true;

ESLint 5-6

首先安装，然后使用
检测 src 目录下的代码是否符合规范

npx eslint src

webpack 结合 eslin
如果编辑器没有安装 eslint 插件，编辑器就无法检查代码规范。因此可以在 webpack 中配置 loader 来解决。

rules:{
    test:/\.js$/,
    exclude:/node_modules/,
    use:['babel-loader','eslint-loader']
}

这样在每次打包的时候就会在打包信息中显示不符合规范的地方，但是这样和直接运行npx eslint src一样，错误信息在控制台输出中，不方便发现。
可以通过配置 devServer 的 overlay 来解决这个问题。

devServer:{
    overlay:true,
    .......
}

配置了 overlay，如果代码不符合 eslint 规范，编译后，页面会弹出下面的页面！每当修改掉一个 error，就会自动刷新。

使用 git 钩子来检测代码规范

当提交带的时候，通过 git 钩子来对代码进行规范检测。

提升 webpack 打包速度

1.跟上技术迭代（升级 node、Npm、Yarm 版本） 2.在尽可能少的模块上应用 loader
善于使用 exclude 和 include，图片没必要使用，因为所有的图片都需要进行打包处理。
3.plugin 尽可能精简并确保可靠
4.resolve 参数合理配置
比如配置了多个extensions

resolve: {
  extensions: ["css", "jpg", "js", "jsx"];
}

上面的配置，当引入一个没写后缀的文件时，会先去找对应名称的 css，然后 jpg，依次往下匹配，直到匹配到，这样的话，如果配置的后缀比较多，肯定会影响效率。
所以建议配置逻辑代码的文件，资源类的最好在引入时写全后缀。

mainFiles 指定默认加载文件,默认是 index，当我们引入自定义组件时，通常引入到文件夹就行了，就是因为这个配置。

resolve: {
  mainFiles: ["index"];
}

这个属性同样有上面性能问题。

自定义 loader

其实 loader 就是一个函数，函数会接收被执行文件的内容，然后在 loader 中对内容做处理即可。
下面是一个自定义loader

//不要使用箭头函数，this的指向会出现问题。loader中的this需要绑定webpack响应的上下文
module.exports = function(source) {
  return source.replace("eluanshi", "wenmu");
};

上面就是一个简单的 loader 开发完成，然后在 webapack 中配置即可

module: {
  rules: [
    {
      test: /\.js/,
      use: [path.resolve(__dirname, "./loaders/myloader.js")],
    },
  ];
}

打完包后，js文件中所欲的eluanshi都会被替换成wenmu
如果返回值是多个，则需要用到callback函数
异步方法

const callback = this.async();
setTimeout(() => {
  callback(null, result);
}, 1000);

自定义 plugin

loader 是一个方法，plugin 是一个类。因为在使用的时候需要 new 一个实例。

调试开发的 plugin，使用 node 的调试，配置一个新的命令

"scripts":{
      "debug":"node --inspect --inspect-brk node_modules/webpack/bin/webpack.js
}

• inspect 开启调试模式
• inspect-brk 在代码第一行截住
  并且可以在代码中使用debugger

什么时候执行 resolve？

当引入一个模块时，会执行 resolve 中的配置。

什么时候执行 resolveLoader

和 resolve 类似，这个是当引入 loader 的时候，执行里面的配置。