webpack使用与安装

一，webpack是什么？

webpack 是一个现代js应用程序的静态模块打包器，

webpack打包示意图

webpack功能：分析项目结构，找到js模块以及其他一些浏览器不能直接运行的拓展语言（scss，TypeScript）并将它们打包为合适的格式供浏览器使用

构建： 就是将源代码转换成发布到线上可执行的JS,CSS,HTML代码

构建的过程包含：

    代码转换： TypeScript 编译成JS，Less，Sass编译成css等

    文件优化：能够压缩JS，css，html代码，压缩合并图片

    代码分割：能够提取多个页面中的公共代码，提取首页不需要执行部分的代码让其异步执行

    模块合并：在采用模块化的项目中会有很多个模块和文件，需要构建功能把模块分类合并成一个文件

    自动刷新：监听本地源代码的改变，自动重新构建刷新浏览器

    代码校检：在代码被提交到仓库前是否符合规范，以及单元测试是否通过

    自动发布：更新代码后，自动构建出上线发布代码并传输给发布系统，

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

 

二，webpack的安装和使用

    1.安装webpack4   要求先安装node 版本8.5以上

    2.安装步骤

        ① 使用CMD安装

               ⑴ 全局安装： npm install --global webpack     不推荐，因为全局安装会锁定版本

               ⑵ 局部安装： npm install --save-dev webpack  或者： npm install --save-dev [email protected]版本号

      webpack在安装4.0以上版本，还需要安装一个插件

         ② 执行如下指令

                npm install --save-dev webpack-cli

     3.打包练习：

          ①：在桌面上创建一个工程，通过CMD进入这个工程

         

          ②：初始化工程：

                   

                  

                    npm init -y

        ③：在CMD中输入：

                局部安装webpack npm install --save-dev webpack

                安装cli ： npm install --save-dev webpack-cli

        以上两步相当于如下指令：

                    npm install webpack webpack-cli --save-dev

 

然后项目中就会有

项目中的dist 和 src 、webpack.config.js  我自己创建的

在项目中新建一个dist文件  在里面创建一个index.html

在项目中新建一个webpack.config.js

自定义代码如下：

src文件中新建一个index.js

然后在cmd命令符中写 npx webpack --config webpack.config.js --mode development

会出现：

就会在dist文件中出现一个bundle.js

 

然后就完成了！