webpack4.0--如何安装和配置（一）

前言

一直计划想把webpack系统的学一遍，如今终于开始了，接下来会分享我从零开始学习的过程，记录本身，分享他人，这篇文章主要分享安装和配置，也就是文档中Getting Started的学习。

如何安装webpack

1. 环境配置：在学习webpack以前，先配置一下node环境，下载node，傻瓜式安装就好了，最好是选择稳定版本的node，不要选择最新版本的。在这里个人版本是v10.15.3版本
2. 在桌面中建立webpack-demo文件夹，命令建立：mkdir webpack-demo 进入webpack-demo文件夹
3. 进入文件夹后初始化这个项目，命令：npm init

   初始化后会有不少配置项，名字、版本、描述，能够不用管一路回车建立就好了，文档中也有提到，若是你不想填写这些配置，那就执行npm init -y就能够

4. 在编辑器里面打开项目，在这里我进行了增删改的操做，由于目前有些东西用不到也不须要，原有的样子

   整理后：private的配置意思是私有项目，不会上传到npm库里。

   
   

5. 初始化完毕以后开始安装webpack，有两种方式安装webpack
   第一种：全局安装，命令：npm install webpack webpack-cli -g  安装webpack同时安装webpack-cli工具（安装webpack-cli的做用就是能让webpack打包命令顺利执行）
6. 注意：通常不要去安装全局，由于你不可能所在公司的全部项目webpack都是一个版本，可是若是你要是启动两个以上的项目的话因为版本不同确定会遇到项目没法启动的问题，因此仍是在本项目中去安装比较好
   删除全局webpack命令：npm uninstall webpack webpack-cli -g  这样就删除了，查看版本也找不到了   

   第二种：项目安装，命令：npm install webpack webpack-cli --save-dev 或者直接-D
   我这里的webpack版本是4.31.0，能够根据npm install webpack@版本号 webpack-cli -D 安装本身指定的版本
   查看项目

   
   
   

手动配置文件

1. 在根目录建立webpack.config.js文件（wenbpack在打包的时候回去默认寻找这个文件，若是不是这个文件名，那么打包过程就会报错，固然你也能够改变这个默认文件，你能够执行npx webpack --config  你想起的名字.js，这样打包的时候webpack就会去寻找你想设置的配置文件）
   

   
   

   注意：__dirname是两个下划线
2. 执行npx webpack 命令进行打包
   

   
   

3. 其实你也能够设置成相似vue那种执行 npm run build 那种进行打包，可是须要配置一下
   

   
   

4. 打包后整理文件，无报错
   

   
   

总结

以上就是webpack4版本的开始安装和简单的配置，通俗易懂，若是你也想学习webpack4，你能够关注我，咱们一块儿学习，这只是一个开始，后期每周至少更新一篇（由于最近工做比较紧张，因此我只能抽时间去学习和写文章），持续更新中~~~~~~~~~给个小小的赞让咱们不断前行吧！！！