webpack前端构建工具学习总结(一)之webpack安装、创建项目

时间:2022-05-25 15:43:04

npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题;

常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
nodejs的官网地址:https://nodejs.org/en/
nodejs中文网地址:http://nodejs.cn/
1.从node.js官网下载最新安装包进行安装
2.windows系统下,windows+R调出命令,输入cmd,打开命令工具,检测npm是否安装:输入命令:npm -v
 webpack前端构建工具学习总结(一)之webpack安装、创建项目
3.使用npm安装webpack:输入命令:npm install webpack -g
webpack前端构建工具学习总结(一)之webpack安装、创建项目

将webpack安装到全局环境中

4.输入命令:webpack -v,查看当前webpack的版本号

webpack前端构建工具学习总结(一)之webpack安装、创建项目

5.进入项目目录,输入命令:npm init,生成package.json文件

package.json的文件内容:

webpack前端构建工具学习总结(一)之webpack安装、创建项目

6.输入命令:npm install webpack --save-dev为项目添加webpack依赖

webpack前端构建工具学习总结(一)之webpack安装、创建项目

7.创建一个静态文件hello.js,里面包含一个hello函数和通过require引入world.js

webpack前端构建工具学习总结(一)之webpack安装、创建项目 webpack前端构建工具学习总结(一)之webpack安装、创建项目

运行命令之前,hello.bundle.js不存在

运行命令:webpack hello.js hello.bundle.js,将hello.js编译并打包到hello.bundle.js

webpack前端构建工具学习总结(一)之webpack安装、创建项目

hello.bundle.js文件内容如下:

webpack前端构建工具学习总结(一)之webpack安装、创建项目

Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块

运行过程中如果出现:webpack:command not found,请检查是否在全局环境下安装webpack,全局环境下安装webpack使用命令:npm install webpack -g

接下来就要开始学习loader了:webpack前端构建工具学习总结(二)之loader的使用