webpack3.0+学习一

什么是WebPack？

WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。

这段话有三个重点：

• 打包：能够把多个Javascript文件打包成一个文件，减小服务器压力和下载带宽。
• 转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。
• 优化：前端变的愈来愈复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提高性能的责任。

 

安装WebPack

具体安装方法：

用win+R打开运行对话框，输入cmd进入命令行模式。而后找到你想开始项目的地方，输入下方代码：

 

1 2	mkdir webpack_demo cd webpack_demo

第一句是创建一个文件夹，第二句是进入这个文件夹。这个文件夹就是咱们的项目文件目录了，文件夹创建好后，能够经过下面命令安装WebPack。

须要注意的是,你在执行下一步时必须安装node，能够经过 node -v来查看node安装状况和版本，若是没有安装，要先安装node才能够继续进行。

 

1 2	//全局安装 npm install -g webpack

若是你这时安装失败了（出现了报错信息），通常有三种可能：

• 检查你node的版本号，若是版本号太低，升级为最新版本。
• 网络问题，能够考虑使用cnpm来安装（这个是淘宝实时更新的镜像）,具体能够登陆cnpm的官方网站学习http://npm.taobao.org/。
• 权限问题，在Liux、Mac安装是须要权限，若是你是Windows系统，主要要使用以管理员方式安装。

注意：全局安装是能够的，可是webpack官方是不推荐的。这会将您项目中的 webpack 锁定到指定版本，而且在使用不一样的 webpack 版本的项目中，可能会致使构建失败。

2.初始化项目

初始化package.json

npm init -y

package.json 文件中

1.  
   "scripts": {
2.  
   "build": "webpack --profile --progress --colors --display-error-details",
3.  
   "dev": "webpack --display-modules --profile --progress --colors --display-error-details"
4.  
   },

color 输出结果带彩色，好比：会用红色显示耗时较长的步骤

profile 输出性能数据，能够看到每一步的耗时

progress 输出当前编译的进度，以百分比的形式呈现

display-modules 默认状况下 node_modules 下的模块会被隐藏，加上这个参数能够显示这些被隐藏的模块

display-error-details 输出详细的错误信息

---

全局安装

npm install webpack -g

本地安装

npm install webpack webpack-cli -D//-D是指开发环境须要，上线不须要，下同

通常推荐本地安装，安装在本身的项目中，否则版本不一样会有不兼容。