Webpack初级入门（一）

想学习webpack已经很久了，终于下决心要学习了~~作为一个新手小白，倒是有点迷茫和无从下手。幸好有不少的前辈和大神都分享过学习的感悟，遵循着大家的学习轨迹，开始了入门学习，也分享下自己的学习心得。

关于webpack

webpack是一资源模块打包器。它能够将多种资源文件如·js、css、less、图片文件打包起来，作为模块来处理，从而减少页面的请求，提高开发效率。

安装webpack

webpack需要通过npm来支持安装。

1、通过安装node.js安装npm

大家可以根据自己电脑的版本和系统来选择版本安装。由于新版的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文件的处理，命令行工具的使用都有了个初步的学习。

工欲善其事必先利其器，起步才刚刚开始~~

Webpack初级入门（一）