webpack的整套流程且在VScodeUserSetup中基本使用webpack

1.安装

1.1：先安装Node.js建议使用.msi文件

1.2：VScodeUserSetup.exe安装还是老样子微软出品直接'next'就行(不建议更改路径体积较小不影响)

1.3：检验node-v12.16.0-x64.msi（即官网最新版本）是否安装完毕

打开cmd页面输入node -v(-v前面有空格的)

1.4：安装nrm（我们国内一般使用npm包的镜像地址）

        1.4.1 运行npm  i  nrm -g全局安装nrm包（没出现erro就ok）

        1.4.2. 使用nrm  ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址

 2.VScodeUserSetup的创建和配置插件

          2.1：先下载需要的配置

 红色为必须要下载 黑色为建议下载方便使用

     2.2：搭建文件夹目录VScodeUserSetup中不搭建

        2.2.1:项目文件夹

        2.2.2：项目的目录（dist即存放编译好的文件）

        2.2.3：src下的子文件

        2.2.4：打开本机创建的项目

        2.2.5：效果如下（没有图标就是没有插件配置应用去下载使用ok了）

 3.安装VScodeUserSetup中的webpack

        3.1：新建终端

         效果如下

        3.2：运行npm  i  webpack  -g全局安装webpack，这样就能在全局使用webpack的命令（效果如下）

         3.3：在项目中运行npm  i  webpack  --save-dev 安装到项目依赖中项目中会多出一个node_modules 这个文件夹后使用npm init -y命令初始化项目结构（效果如下）

        然后就可以下载你需要的导包比如Jquery（添加jquery的依赖）

       在js文件中使用Jquery包

      3.4：现在我们应该使用webpack压缩并处理成一个.js文件

                3.4.1： 首先需要安装 webpack-cli 客户端

                3.4.2：保存配置信息到package.json中

                3.4.3：使用webpack开始处理文件（ webpack   ./src/main.js     -o ./dist ）

         效果如下(在html文件中引入bundle.js就可以使用了)

  4.webpack的进阶（常用方式）

        1:下载webapck webpack-dev-server  webpack-cli  创建一个webpack.config.js文件

 

        npm i webapck@4.41.6 --save-dev

        npm i webpack-dev-server@3.10.3 --save-dev

        npm i webpack-cli@3.3.11 --save-dev

        2:添加依赖

        npm install webpack--save-dev

        npm install webpack-dev-server --save-dev

        npm install webpack-cli --save-dev

        3.添加npm  i  html-webpack-plugin@3.2.0  -D

      作用：自动在内存中根据指定页面生成一个内存的页面,并把打包好的 main.js 追加到页面中去(人话不需要进行引入)

       4.编写webpack.config.js文件以及package.json文件

        webpack.config.js

         package.json

5.运行命令npm run dev（json文件修改就要重新运行 ctrl+c停止运行）