想学习webpack已经很久了，终于下决心要学习了~~作为一个新手小白，倒是有点迷茫和无从下手。幸好有不少的前辈和大神都分享过学习的感悟，遵循着大家的学习轨迹，开始了入门学习，也分享下自己的学习心得。
关于webpack
webpack是一资源模块打包器。它能够将多种资源文件如·js、css、less、图片文件打包起来，作为模块来处理，从而减少页面的请求，提高开发效率。
安装webpack
webpack需要通过npm来支持安装。
1、通过安装node.js安装npm
node.js下载安装地址
node.js的安装配置可以参照以下教程
大家可以根据自己电脑的版本和系统来选择版本安装。由于新版的node.js已经集成了npm，所以在node.js安装成功的同时，npm也已经安装好了。
//检测node是否安装成功
node -v
//检测npm是否安装成功
npm-v
打开命令行工具（cmd）,输入以上命令
2、安装webpack
//全局安装
npm install -g webpack
//安装到某一项目目录下
npm install --save-dev webpack
//检测webpack是否安装成功
webpack -v
webpack工作原理
webpack安装好之后，就可以来尝试下如何使用了。我是在Windows系统下进行的项目测试。新建一个空的文件夹（如mywebpack）,通过cmd进入到项目目录下。
1、在新建的项目目录下安装webpack
//安装webpack到项目目录下
npm install --save-dev webpack
安装成功后，目录下会增加一个node_modules文件夹
2、初始化
//初始化
npm init
输入命令后，一直按回车，直到出现“IS this ok?<yes>”。初始化完成后，会在文件夹里面自动创建package.json文件
package.json文件包含了npm的相关信息,包括作者、简介、包依赖、构建等信息。格式必须是严格的json格式。
3、上面2步完成之后，项目的环境配置安装已经完成。
4、webpack对js文件的处理，在项目目录下新建一个 hello.js
//打包hello.js文件
webpack hello.js hello.bundle.js
返回的一串数据结果
Hash-- 哈希值
version-- webpack版本
Time-- 本次打包所花费的时间
Asset-- 打包后文件的名称
Size-- 打包后文件的大小
Chunks-- 打包的分块
Chunks Names-- 打包分块的名称
5、webpack对css文件的处理，在项目目录下新建一个 style.css
与js文件不同，webpack本身不支持css文件，得依赖loader
loader
//css-loader安装
npm install --save-dev style-loader css-loader
通过require对css文件的引用
在cmd中再次输入webpack hello.js hello.bundle.js，可以看到css文件已经成功编译打包
//为了方便对所有的css文件进行引用，可以在cmd中执行对所有css文件的配置
webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader"
6、新建一个html文件，做个简单小测试吧
//html文件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mywebpack</title>
</head>
<body>
<script type="text/javascript" src="hello.bundle.js"></script>
</body>
</html>
//style.css文件样式
html,body{padding:0; margin: 0;}
body{ background-color:black;}
//hello.js文件代码
require('./style.css');
function hello(str){
alert(str)
}
hello('hello mywebpack')
在浏览器中打开html文件，可看到运行效果
到此，已经完成了一个简单的webpack的demo入门小测试。通过一个小练习，可以对webpack的安装、工作原理、js文件的处理，css文件的处理，命令行工具的使用都有了个初步的学习。
工欲善其事必先利其器，起步才刚刚开始~~
