-
Angular：如何用Angular(<6.0)和Webpack搭建项目
angular-cli按照Angular官方教程搭建一个 Angular 项目，默认都是先安装 angula-cli，再用命令行ng new angular-project-name会自动生成一个符合 angular best practice 的项目， 如下所示：源码可以在 angular-seed-project 查看。本文中的示例代码用的 angular-cli 的版本是 1.6.0，angular 是5.0.0然后直接跑ng serve就把项目跑起来了，用 angluar-cli ...…
-
如何配置chrome和VS Code调试前端代码
最开始用 Angular5 的时候，开发工具用的是 VS code，不知道要怎么用 chrome 调试 typescript 的代码，看了 VS Code 官方文档，才知道具体配置方案。这篇文章就是教你怎么结合 chrome 浏览器和 VS Code 调试前端代码，主要介绍从 VS Code 里 launch chrome 浏览器，并且在 VS Code 里设置断点，然后在 chrome 操作网页从而 hit 断点进行调试。关于更多调试方法，比如 attach DevTools 到浏览器 ...…
-
如何在webpack build结束后移动dist里的文件
在 印度人代码 这篇文章中有提到需要在每次webpack build的时候需要每次都动态的去替换MVC中的index.cshtml文件。为什么要替换index.html文件在现有的这个框架里，每次webpack打包生成的bunlde文件都是 app.bunlde.js / vendor.bundle.js / polyfills.bunlde.js,这个会有 缓存问题。为了解决缓存问题，每次如果对应的bundle文件里面有代码改动，利用webpack contenthash 会生成唯一的h...…
-
webpack：分析和优化webpack bundle文件
在用 webpack 打包的过程当中，曾经把 webpack 官方文档看了不下十遍，对于最终 bundle 文件里具体到底有什么或者某个特定的 module 到底被放到哪一个 bundle 文件里，始终都是一头雾水。特别是代码切割这一块，看了那么多遍，并且 google 了各类大神对这一块的解释，还是一头雾水。直到我发现 webpack-bundle-analyzer 这个小插件，把它 install 到本地项目里跑起来，一下子就彻底明白了。今天这篇文章就是给大家介绍 webpack-bu...…
-
Angular：如何在 Angular(8.0) 中配置 Webpack
在文章【Angular：如何用Angular(<6.0)和Webpack搭建项目】中介绍了如果在 Angular 项目中想要自己配置 webpack，那么必须用命令‘ng eject’把 Angular 内置的 webpack.config 文件暴露出来，然后根据项目需求自己重写整个 webpack.config 文件。但是 Angular6.0 以上的版本，Angular 官方去掉‘ng eject’这个命令。那么 Angular6.0+ 项目中，想要根据项目需求添加或者更改 we...…