webpack3学习2--资源管理

根据博文webpack3学习1–Getting Started的操作，现在会有一个小项目，显示 “Hello webpack”。现在我们尝试整合一些其他资源，比如CSS和图片，看看 webpack 如何处理。

加载CSS

为了从JavaScript模块中import一个CSS文件，你需要在module配置中 安装并添加 style-loader 和 css-loader：

cnpm install --save-dev style-loader css-loader

webpack.config.js增加module==>rules配置：

var 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']
            }
        ]
    }
};

在项目中添加一个新的 style.css 文件，并将其导入到我们的 index.js 中：

.hello {
    color: red;
}

import _ from 'lodash';
import './style.css';

function component() {
    var element = document.createElement('p');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');
    return element;
}

document.body.appendChild(component());

运行

npm run build
http-server

浏览器访问https://localhost:8080/dist/ ，可以看到Hello webpack变红了。

加载图片

可以使用 file-loader加载图片。

cnpm install --save-dev file-loader

webpack.config.js增加file-loader的配置

var 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']
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            }
        ]
    }
};

src目录下增加测试图片icon.png

webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

index.js如下

import _ from 'lodash';
import './style.css';
import Icon from './icon.png';

function component() {
    var element = document.createElement('p');
    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());

style.css增加背景图片：

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

运行

npm run build
http-server

浏览器访问https://localhost:8080/dist/ ，可以看到图片和背景图片。
webpack资源管理还可以加载字体、数据、全局资源等，下一步再研究。