Webpack

1. devServer 这里正常情况下访问一些服务都会遇到跨域问题，另一方面在测试环境下，有时候请求的后端地址其实是不一样的，所以在代码中把host写死的话会很不灵活。 这里的路由会根据具体的path来决定渲染的组件，以之前的webpack配置文件打包，然后我们看一下浏览器。…

1. library的打包 libraryTarget:主要用于配置库输出的规范，当值为umd是universal 配置，其他用户可以通过除了script标签之外方式来使用。 打包过程中如果遇到了lodash这个库就忽略这个库，不打包到node_modules。 用户使用的时候…

1. CSS的分割 这是因为main.js里面引入了lodash，lodash并不是入口js文件，而是异步加载的文件。 这里可以借助optimize-css-assets-webpack-plugin这样的插件来优化压缩结果。 2. Shimming 打包过程中，我们往往需要处…

1. CodeSplitting 现在我们去看一下main.js，发现目前所有的业务代码和lodash工具代码都打包在了一起。 真正情况下可能业务代码非常的多，如果现在这样打包会把两者打包到一起，从代码运行层面上来看没有问题。但是有一个潜在的问题，假设lodash很大，有1MB…

1. TreeShaking tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性,例如 import 和export 接着我们build打包一下，发现打包后端…

1. devServer 他就会监听打包源代码的变化，一旦源代码有变化他就会重新打包。从而更新dist目录下面的文件。 这是第一种解决方法。不会帮我们起服务器，没办法做ajax调试，必须手动刷新浏览器。 上述方法只能完成自动打包，但是你想要自动打开文件，并且模拟一些服务器的特性…

这样一个场景，打包完的index.html文件会给后端，作为网页入口文件，而那些js文件会上传到CDN中，网页加载的时候再拉下来。 2. sourceMap的配置 sourceMap其实是描述的一种映射关系（基于map文件），当你的代码出错的时候，不打开sourceMap的话出…

1. Webpack的loader Loader就是一种打包方案，对于某一种类型文件他知道如何打包，帮助webpack完成打包工作。 上述其实就是制定了一个规则，告诉webpack遇到以.jpg结尾的文件时候使用file-loader去处理。 这样重新npm run bundl…

原始的时候我们编写网页程序，主要是编写HTML文件，接着通过scrpit标签引入一个index.js文件辅助编写一些业务逻辑和DOM操作。若JS处理逻辑过多，index.js文件就会膨胀，而且编写逻辑主要以面向过程为主，不好维护和扩展。 接着可以考虑一些例如面向对象的思想，将i…

随时升级webpack及其相关管理工具的版本，包括npm，node，yarn等。 loader的解析和处理较为耗时的，有可能的话我们可以使用exclude和include字段来配置loader忽略与仅应用的文件。 之前笔记中上面我们使用了一个插件进行CSS的压缩，但是实际上在开…