脚手架工具 npm与Webpack

npm：一个前端依赖包管理工具，可以使用npm下载项目所需要的依赖包。

全称是 Node Package Manager

可以参考这篇博客，了解npm是做什么的，https://blog.youkuaiyun.com/qq_37696120/article/details/80507178

Webpack：

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

1.NodeJS安装

要使用npm就要先安装nodejs的环境

Mac

双击安装包安装。

 

Windows

选择msi文件，x64,下载

双击安装包安装

 

2.使用npm初始化项目

会在项目中生成package.json文件，所有的npm安装的文件都会在里面配置

1.输入指令：npm init 

输入一些项目参数

2.完成后，项目会生成一个package.json文件

3.npm的常用指令

安装依赖包：npm install xxx@v.v.v   xxx代表包名  v代表版本号

卸载依赖包：npm uninstall xxx@v.v.v

参数：-g 安装全局依赖包

参数：--registry=https://registry.npm.taobao.org 如果下载比较慢的话，可以使用我们国家的镜像下载地址

3.Webpack

3.1 安装

在全局安装webpack

在项目下安装一个webpack

如果输出webpack -v，要求安装webpack-cli。

我们先退出，然后安装一个全局的webpack-cli：npm install --save-dev webpack-cli -g

再执行webpack -v就是正确的了

Webpack就安装到了node_modules中了

3.2 基础使用

在项目下写两个js文件

在项目根目录下，新建webpack配置文件，填写基础的配置信息

output代表输出的路径和输出的文件名

使用打包命令进行打包 webpack

这时就会在项目的根目录下生成一个dist/app.js,就是打包生成的文件

3.3 Webpack对脚本的处理

1.输出多个JS文件，并指定输出的文件夹

项目里有两个js文件，我们想要用webpack分别打包两个js文件，并将输出的文件放在dist/js目录下

使用webpack打包

就会在项目的根目录下生成

2.在项目中引入Jquery

使用npm安装jquery:npm install jquery --save

在文件中使用jquery

使用webpack进行打包

打开html网页