最近工作中用到了nuxt,才发现,如果 webpack 学的 6,nuxt 基本不需要学习,没什么学习成本的。因此,这篇重新记录下 webpack4 的一些基础知识点,下一篇将会配置一个优化到极致的react脚手架, 也希望大家能够持续关注,配置 webpack 就是优化优化再优化,哈哈~
已经发布了 webpack4的30个步骤打造优化到极致的react开发环境,如约而至, 点击这里
酒壮怂人胆,我学这个的办法基本就分 3 步:
好了,正式开始。
Webpack 可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript 等),并将其打包为合适的格式以供浏览器使用。
其实 Webpack 和另外两个并没有太多的可比性,Gulp/Grunt 是一种能够优化前端的开发流程的工具,而 WebPack 是一种模块化的解决方案,不过 Webpack 的优点使得 Webpack 在很多场景下可以替代 Gulp/Grunt 类的工具。
动态卸载和加载CSS
style-loader为 css 对象提供了use()和unuse()两种方法可以用来加载和卸载css
比如实现一个点击切换颜色的需求,修改index.js
webpack.ProvidePlugin 参数是键值对形式,键就是我们项目中使用的变量名,值就是键所指向的库
说白了就是在需要的时候在进行加载,比如一个场景,点击按钮才加载某个js.
清空目录,文件有改动就重新打包
到这里基本就结束了,觉得有帮助,不妨点个赞,不足之处,还望斧正~
作者:张不怂 https://juejin.im/post/5cea1e1ae51d4510664d1652