重温webpack

还记得第一次使用webpack的时候，用得比较辛苦。然而现在太久不用了的话，有些东西又给忘记，但一步一步来，感觉比第一次上手得快

webpack的作用：官方的解释是它是一个前端资源加载/打包工具。根据某块的依赖关系进行静态分析，然后按照指定的规则生成对应的静态资源

我们首先全局安装webpack，但是在这之前，你的电脑必须安装node.js.由于npm的安装速度比较慢，可以使用淘宝镜像$ npm install-g cnpm--registry=https://registry.npm.taobao.org

第一步：现在你的电脑建个文件夹，比如说在桌面什么的。我这里建的是webpack，全局安装webpack

cnpm install webpack -g 

安装成功的截图

第二步，建个文件夹，切换到webpack文件夹下面，然后用mkdir建立一个文件夹

第三步，其实已经在上图中体现出来了。在app的文件夹下建立index1.js和index.html，它们各自对应的代码如下

index.html index.js

注意我并没有建立bundle.js

然后使用命令 webpack index1.js bundle,js,之后运行index.html就可以看到index1的内容

我们再来看看index2.js和index1.js的内容

index2.js index1.js

运行index.html的效果

webpack本身只能处理js模块，如果需要处理其他的模块，就需要loader进行转换。所以我们需要在应用中添加css文件，就需要使用到css-loader和style-loader，他们做两件不同的事情，css-loader会遍历css文件,然后找到url（）表达式处理他们，style-loader会把原来的css代码插入页面中的一个style标签中。

1、安装命令 webpack css-loader style-loader

2、在app文件夹下建立一个style.css写一句body{background-color:red;}

3、修改index1.js

运行index.html