web开发中webpack的一些个人心得

一.webpack是什么？

webpack是一个现代js应用程序的静态模块打包器;
它的功能是:分析项目结构，找到js模块以及其他一些浏览器不能直接运行的拓展语言(sass,TypeScript,less),并将它们打包为合适的格式以供浏览器使用。

构建:
就是将源代码转换成发布到线上可执行的JS,CSS,HTML代码
构建的过程包含:
代码转换:
TypeScript编译成JS,
less,sass编译成css等
文件优化:
能够压缩js,css,html代码,也能压缩合并图片
代码分割:
能够提取多个页面中公共代码,提取首页不需要执行部分的代码让其异步执行
模块合并:
采用模块化的项目中,会有很多个模块和文件，需要构建功能把模块分类合并成一个文件
自动刷新:
监听本地源代码的改变,自动重新构建刷新浏览器
代码校检:
在代码被提交到仓库前需要校检代码是否符合规范,以及单元测试是否通过
自动发布:
自动构建出上线发布代码,并传输给发布系统

构建其实是工程化,自动化思想在前端开发中的体现,把一系列流程交给代码区实现,让代码自动化的执行这一系列复杂的流程。

二.webpack的安装

2.1使用CMD全局安装:
npm install --global webpack
不推荐:因为全局安装会锁定版本。
2.2局部安装:
创建一个文件夹
先初始化:npm init -y;
再执行npm install --save-dev webpack
或者:npm install --save-dev webpack@版本号
webpack在安装4.0以上版本,还需要安装一个插件。
执行以下指令:
npm install --save-dev webpack-cil

以上是本人的一些总结，如果其中有误，请联系博主，谢谢了！