当前位置: 首页 > 工具软件 > yao-config > 使用案例 >

webpack详细安装以及webpack.config.js配置,package.json配置

赵佐
2023-12-01


First Of All !什么是webpack?

概念:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

理解:webpack 有2个核心:模块化打包

模块化:

  • 在 webpack 的思路中,不只是 JavaScript,图片、css、json等文件,都可以被当作模块来使用。

打包:

  • 理解了webpack可以帮助我们进行模块化,并且处理模块间的各种复杂关系后,打包的概念就非常好理解了。
  • 就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
  • 并且在打包的过程中,还可以对资源进行处理,比如压缩图片,将scss转成css,将ES6语法转成 ES5语法,将TypeScript转成JavaScript等等操作。

Secondly 需要了解这三者关系!

webpack、node、npm之间的关系
1.webpack想要能够正常运行,必须依赖node环境
2.在安装node的时候一般会帮我们安装一个工具,叫做 npm (node packages manager / node包管理工具),这个工具只是为了帮助我们管理node环境下的各种包,比如依赖。


一、NodeJs安装

1.安装步骤

  • 1、下载Node.js(点击此处跳转下载

  • 2、除了修改默认安装位置,其余一律next(下一步)即可(如无特殊需要,可以直接安装在C盘,但是建议选择另外的磁盘单独建一个文件夹来安装它)。

  • 3、查看版本:

1.键盘 win+r ,以管理员方式运行cmd;  
2.输入node -v ,回车; 
  • 4、环境变量配置

    此处的环境配置主要配置的是 npm 安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。

    例如:我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中(我的文件夹是nodejs),则在我的安装目录下创建两个文件夹【node_global】及【node_cache】

    4.1、设置全局目录和缓存目录,创建完两个空文件夹之后,打开cmd命令窗口,输入:

1、npm config set prefix "D:\nodejs\node_global"
2、npm config set cache "D:\nodejs\node_cache"
  • 注意: “D:\nodejs\node_global” 这个是安装在D盘的情况下创建的文件夹路径,如果安装在其他位置,注意文件夹路径是否正确

    4.2、设置环境变量,win->搜索环境变量->编辑环境变量

    4.3、修改环境变量

    • 4.3.1、将【用户变量】下【Path】的【C:\Users\yao\AppData\Roaming\npm】修改为【D:\nodejs\node_global】

    • 4.3.2、在【系统变量】下新建【NODE_PATH】,输入【D:\nodejs\node_modules】

二、webpack安装

1.安装步骤

  • 1、在你喜欢的磁盘下建一个你喜欢的文件夹(名字自定义,但是建议用英文或者英文+数字)用来存放我们的项目,以后我们的所有项目都可以放到这个文件夹里面,方便我们开发和管理,然后通过cmd进入这个文件夹

    * 1.1、第一种情况:如果你的文件夹建在C盘(没有跨磁盘),复制该文件夹的全路径,然后输入cd 你复制的路径,回车
    
    * 1.2、第二种情况:如果你的文件夹在其他磁盘,则先进入对应磁盘,然后找到我们的项目文件夹
    
   1、d:
   2、cd D:\work\实训课程\examples\web
  • 2、创建一个名为 myWebpackProject 的文件夹(这个文件夹的名字是你自定义的),并且进入该文件夹

  • 3、初始化文件夹

  • 4、安装webpack和webpack-cli (webpack4.0+以后的版本,需要安装webpack-cli)

1、mkdir myWebpackProject && cd myWebpackProject
2、npm init -y
3、npm install webpack webpack-cli --save-dev

疑问:在这里,我们为什么不进行全局安装?

  • 全局安装后,会造成多个项目依赖同一版本,但是有时候我们想要的是不同版本的,因此不推荐全局安装

2.webpack的基本使用

  • webpack一般包含2个东西:src(开发文件)、dist(发布,全名 distrbution),那么我们先创建src来存放我们的文件

  • 使用webpack打包

    • 1 键盘 win+r ,以管理员方式运行cmd;

    • 2 找到我们的文件夹

    • 3 在src下面新建一个index.js,随便写点代码

    • 4 打包:运行 npx webpack

      // npx是运行本地的webpack

      npx webpack
      
    • 5、执行完此命令后,多出了一个包含mian.js的dist文件夹,这就是webpack打包后生成的文件了

3.webpack的默认配置

  • 默认入口模块
    • ./src/index.js (可以删除index.js换a.js在运行,会报错)
  • 默认输出
    • 名称: main.js
    • 路径: ./dist
  • webpack默认支持多种模块类型:比如commonJS、esmodule、AMD,这里我们使用的是commonJS
  • webpack默认支持js模块和json模块(注意:在没有其他配置的情况下,webpack不认识非js模块)
    • css/img/text

三、webpack.config.js配置、package.json配置

1、package.json的配置

  • 按照上面的打包方式,我们每次都要运行npx webpack,因此我们可以在package.json中添加scripts软链接
  • 以下是package.json的配置:
{
  "name": "webpackday1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}
  • scripts:用于指定脚本命令,供 npm 直接调用,使用方式是:npm run xxx
    • 当我们设置 “scripts”: { “build”: “webpack” }, 就相当于我们执行了npx webpack,所以现在我们只需要执行npm run build
    • 配置了scripts之后,命令执行时,首先会在我们本地文件(当前项目)里去找webpack,如果本地没有,才会去全局找webpack
    • 我们常用的命令有 npm run dev、npm run serve、npm run build,dev和serve用来运行我们的程序,build用来打包
  • devDependencies:开发时依赖,我们使用–save-dev安装时就会有这个配置

2、npm 配置淘宝镜像

  • 原因:npm使用的是国外的包,下载速度慢,还会失败,所以这里我们配置一个淘宝镜像(cnpm:国内的npm)

1、安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

解释:

  • 1、全局安装 cnpm
  • 2、将各种包(依赖)的地址切换到 国内的淘宝镜像

3、附加

nrm 的使用:

  • nrm可以让我们随意的切换镜像源(也就是我们下载包的地址)

  • 使用nrm ls查看我们所有镜像的版本

  • 切换镜像源:nrm use <源名>

1、cnpm i nrm -g
2、nrm ls
3、nrm use taobao
 类似资料: