webpack学习笔记3 管理资源

在上一节中，我们通过webpack生成了一个小的项目，项目虽小，五脏俱全。这一节，将会看到webpack是如何管理资源的，这些资源包括样式，图片，js脚本等等。webpack相对于gulp之类的基于流的前端配置工具，其动态打包的机制，可以做到按需加载内容，我们可以明确模块到底依赖了哪些资源，那些没有别依赖的资源就不会加载。

是的，webpack最棒的功能就是，可以通过loader这个东西，加载任意资源类型的文件，我们将从css资源开始，看看webpack是如何处理这些资源的。

加载css

首先安装相关的loader，包括style-loader，css-loader.

npm install --save-dev style-loader css-loader

const path = require('path')

const config = {
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    module:{
        rule:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }
}

修改完webpack文件之后，我们可以在js里依赖相关的样式文件，再上一节的index.js里加一句

element.classList.add('hello')

style.css:

.hello{
    color:red
}

加载图片

npm install --save-dev file-loader

file-loader和url-loader可以加载任何文件。

module:{
    rule:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader']
        },
        {
            test:/\.(png|jpg|gif)$/,
            use:['file-loader']
        }
    ]
}

这样在index.js里新增加内容

import icon from './icon.png';

var Icon = new Image();
Icon.src = icon;
element.appendChild(Icon);

全局资源

用这种方式加载资源，可以最直观的看到各个资源之间的依赖关系，无需依赖全局资源，一般全局资源放在/assets文件夹下。这样的结构会非常有用。

比如，在react中，一个组件jsx.可以单独建一个文件夹（以组件名），和这个组件有关的样式，图片等可以都存在这个文件夹下，这样可以把组件所需要的资源紧密的耦合在一起，真正做到按需加载。

当然，如果有一些资源是需要各个组件之间共享的，可以把这些组件放到一个公共的文件夹下，即assets文件夹。

总结

在webpack中，可以家在各种各样的资源，除了上边说的样式和图片意外，还有js文件，字体，有各种xx-loader帮你实现各种各样的功能。此文仅仅是介绍两种最常用的资源类型，样式和图片。

下一章，将会总结一下如何用webpack管理输出

webpack学习笔记3 管理资源