webpack快速入门——如何安装webpack及注意事项（webpack3.X版本）

Posted 2020-10-16 盒子豪

1.window+R键，输入cmd打开命令行工具，输入 mkdir XXXX（XX：文件夹名）；

2.cd XXX 进入刚刚创建好的文件夹里，输入cnpm install -g webpack （安装了淘宝镜像的小伙伴可以直接使用cnpm，没有安装的使用npm）cnpm和npm的区别这里就不多说了，不懂的小伙伴可以百度

附图一张：

3.安装好之后初始化一下，（初始化的主要目的是生成package.json文件）在命令行工具中输入： cnpm init，输入完成后，会有一系列的内容，会问到你关于项目的名称，描述等等，这里可随意填写

4.初始化完成后，对项目目录进行安装，第二步的-g是全局安装，官方不推荐使用，比如你的项目使用的是webpack2.X版本，这样就会覆盖之前的版本，导致项目配置错误。

输入命令：cnpm install --save-dev webpack,安装后之后，可以看看是否安装成功，输入命令webpack -v 即可  （注：--save-dev：本地安装到开发环境）

这样就安装成功了

 

 

前端必学内容：webpack（模块打包器）

webpack3 学习内容，点击即可到达

(1).webpack快速入门——如何安装webpack及注意事项

(2).webpack快速入门——webpack3.X 快速上手一个Demo   

(3).webpack快速入门——配置文件：入口和出口，多入口、多出口配置 

(4).webpack快速入门——配置文件：服务和热更新

(5).webpack快速入门——CSS文件打包

(6).webpack快速入门——配置JS压缩，打包

(7).webpack快速入门——插件配置：HTML文件的发布

(8).webpack快速入门——CSS中的图片处理

(9).webpack快速入门——CSS分离与图片路径处理

(10).webpack快速入门——处理HTML中的图片

(11).webpack快速入门——CSS进阶，Less文件的打包和分离

(12).webpack快速入门——CSS进阶：SASS文件的打包和分离

(13).webpack快速入门——CSS进阶：自动处理CSS3前缀

(14).webpack快速入门——CSS进阶：消除未使用的CSS

(15).webpack快速入门——给webpack增加babel支持

(16).webpack快速入门——打包后如何调试

(17).webpack快速入门——实战技巧：开发和生产并行设置

(18).webpack快速入门——实战技巧：webpack模块化配置

(19).webpack快速入门——实战技巧：优雅打包第三方类库

(20).webpack快速入门——实战技巧：watch的正确使用方法，webpack自动打包

(21).webpack快速入门——实战技巧：webpack优化黑技能

(22).webpack快速入门——集中拷贝静态资源

(23).webpack快速入门——Json配置文件使用

 

如果我的内容对你有帮助，欢迎打赏