天天看点

webpack学习(一)项目中安装webpack

如何在项目中安装webpac,webpack-cli?

前提:电脑安装了 node和npm包管理工具

1 创建项目文件夹或者在已有的项目中打开终端  输入相关命令:

   npm init 

   因为已经安装好了node 的 npm 包管理工具,使用npm 在项目中初始化,使得项目符合 node 规范。

   根据终端提示一步一步输入后

   这样项目文件夹中就会多出一个 package.json文件,一些项目的基本信息:项目名称,版本,描述和javascript脚本等。

   可以添加比如下图中 "private": true, 意思是项目是私有的,不会发布到npm的线上仓库。也可以修改javascript脚本中的配置,比如原始打包命令可能是npx webpack index.js

   配置 "bundle": "webpack" 打包的时候运行 npm run bundle 

webpack学习(一)项目中安装webpack

2 项目中打开终端  输入相关命令:

   (1) 如果是全局安装,使用 npm install webpack webpack-cli -g,检测是否安装成功 使用 webpack -v /  webpack-cli -v

   但是很少有这样全局安装的,原因比如你有的项目使用的是webpack 3+的版本,而另一个项目使用的是webpack4+版本,他们互相之间是有冲突的。

        当你需要打包3+项目的时候,你需要先卸载4+的webpack,然后使用3+的webpack打包。很费劲。

  (2 菊部安装,不对,是局部安装,使用npm install webpack webpack-cli -dev---save (等同于 npm install webpack webpack-cli -D)

         检测版本使用 npx webpack -v 。一般默认是安装最新版本的webpack 如果想安装历史版本,可以先查看一下历史版本 使用 npm info webpack 然后相应的安装。

3 项目中打开终端 输入 npm install 也可以把项目需要的依赖包都安装,运行完项目中会多处一个node_modules文件夹。

这样在项目中加安装了webpack 打包工具。