webpack快速入门（三）：资源管理

上一章说了基本的webpack是用，包括命令行打包，npm脚本打包等基础的东西。

这篇说一下webpack的资源管理，包括（图片，字体，数据），首先调整一下项目结构成：

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules
没有的文件自行新建一个，那个node_modules是自动生成的，这个可不要手工新建
使用webpack加载css文件：
为了在js模块中加载css，我们首先需要安装两个模块：

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

在webpack-demo目录执行上述命令，会安装style-loader和css-loader模块

一个用来加载css文件，一个用来在页面head中插入内嵌样式。

修改webpack.config.js，修改后的文件内容如下：

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

相比上一篇的配置，增加了module配置，简要说明一下。

rules定义规则，test是一个正则。此处的正则表示匹配以.css结尾的文件

use指定使用的loader，loader就是加载器了，你要在webpack中管理各种资源，包括css

就必须有相对应的资源加载器。此处的loader指定了两个加载器，我们之前已经用命令安装到本地了

接着在src目录新建一个style.css文件，文件内容如下：

.hello {
  color: red;
}

不多说，这个不会看不懂吧。。。

修改src目录下的index.js文件，导入我们的css，内容如下：

import _ from 'lodash';
import './style.css';
 
function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');
    return element;
}
document.body.appendChild(component());

相比之前的js文件，这里增加了两行内容：

import语句用来导入我们写的css样式，element.classList.add用来给元素添加样式

修改完成。保存文件，执行如下命令：

npm run build

然后在浏览器中打开index.html，看看div中的字体是不是变成了红色。这说明我们的样式生效了。

使用webpack加载图片：

接着再来看看webpack如何加载图片资源，首先修改webpack.config.js，在rules组里添加如下内容：

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

正则用来匹配图片文件名后缀，加载图片使用file-loader

当然，我们要使用file-loader，肯定要先安装，所以修改完了别忘了控制台执行：

npm install --save-dev file-loader

接着在src目录添加一张图片，图片后缀要和正则的能匹配上。。。随便放什么，随你喜欢就好

再修改src目录的index.js文件，修改后的内容如下：

import _ from 'lodash';
import './style.css';
import Icon from './icon.png';
 
function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');
    var myIcon = new Image();
    myIcon.src = Icon;
    element.appendChild(myIcon);
    return element;
}
document.body.appendChild(component());

在这里导入了图片，并创建了image对象加入到页面中。

再来修改一下src目录下的style.css文件，修改后的内容如下：

.hello {
    color: red;
    background: url('./icon.png');
}

再次执行命令：

npm run build

打包完成后打开html文件，应该可以看到div的背景图片了。

官网关于资源管理的介绍中还说了字体和xml数据的示例，个人觉得如果你不做

富文本编辑器需要自带字体的前端需求并不多，所以不做介绍了

而且使用上来说和加载图片基本差不多。有需要的看下官网介绍吧