使用webpack

1、webpack是基于nodeJs制作的，所以，使用webpack前，需要安装nodeJs，可以进入nodeJs官网进行下载安装 下载nodeJs

2、初始化npm项目

1
2
3
mkdir webpack_learn #新建名为webpack_learn的文件夹
cd webpack_learn #进入名为webpack_learn的文件夹
npm init #初始化项目

3、安装webpack

1
npm install --save-dev webpack

4、安装webpack-cli工具

1
npm install --save-dev webpack-cli

如果npm安装过慢的话，可以考虑使用 淘宝源的cnpm 或者 yarn 都可以增加npm安装速度

引申一个题外话

npm、cnpm、yarn的区别

1.npm 为 nodeJs的一种模块仓库，任何开发人员，都可以向npm仓库上传自己的模块包，也可以下载别人写好的模块包，安装指令

1
2
#模块安装指令
npm install 模块包名

2.cnpm 与npm 所有的操作都基本一致，唯一的区别是，包的源来自淘宝做的npm仓库镜像，可以在地理距离方面，减少下载时间，以及一些需要科学上网的区域来进行包的下载

1
2
3
4
5
#cnpm镜像设置
npm install -g cnpm --registry=https://registry.npm.taobao.org

#模块安装指令
cnpm install 模块包名

3.yarn 的诞生是为了解决由于语义版本控制而导致的npm安装的不确定性问题 yarn安装地址
yarn 所带来的好处

  1. 运行速度得到了显著的提升，整个安装时间也变得更少
  2. 提供离线模式，断网情况下，也可以进行安装之前缓存的包
  3. 允许合并项目中使用到的所有的包的许可证，减少偶尔出现的npm版本不对称问题

推荐使用yarn来进行npm包的安装

也就是

1
2
yarn add webpack
yarn add webpack-cli

这样就得到了一个安装上了webpack及其脚手架的项目

1
2
3
4
webpack_learn
    |- node_modules
    |- package.json
    |- yarn.lock