webpack简单使用（二）

在上一篇webpack简单使用（一），提出了一个问题：如何给css、图片等文件进行打包？

解决方法：使用webpack的loader处理css文件

下面是步骤：

1-用npm init创建包

2-安装本地webpack，npm install webpack@3.6.0 ,必须进入你项目的根目录。安装成功会出现如图：

3-创建css文件，并在main.js里对它产生依赖，这样才能进行关联打包。

normal.css

body{
	background: red;
}
/*将css打包*/

main.js 

//3、依赖css文件
require('./css/normal.css')

4-对css打包需要css-loader

https://www.webpackjs.com/loaders/ 官网查找相关安装命令：

npm install --save-dev css-loader

 5-在webpack.config.js配置module (官网也有例子介绍）

module: {
	    rules: [//配置loader:先安装css-loader 后将样式导入html style-loader
	      {
	        test: /\.css$/,
	        use: [ 'style-loader', 'css-loader' ]//css-loader只负责将css加载     style-loader负责将样式添加到DOM
	        
	      }
	    ]
	  }

 6-我们的css-loader只是负责将css加载，并没有将样式添加到DOM,所以我们还要安装style-loader:

npm install style-loader --save-dev

7-已经在5配置了style-loader

'style-loader', 'css-loader'两者的顺序是不能变的，因为webpack是从右往左开始解析。

8-总结：安装loader，配置loader.

遇到的问题：

1、利用webpack的url-loader对图片文件进行处理时，如果图片过大，则要安装file-loader(不需要配置）