webpack入门第二集：资源加载输出

安装模块

css

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

图片

npm install --save-dev file-loader

加载字体
file-loader 和 url-loader 可以接收并加载任何文件

CSV、TSV 和 XML

npm install --save-dev csv-loader xml-loader

加载css,定义webpack模块

const path = require('path');

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

创建一个css文件
src/demo.css

.h2{
    font-size: 16px;
    color: #f60;
}
p{
    line-height: 40px;
}

src/index.js

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

function component() {
    var element = document.createElement('div');

    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    element.innerHTML = _.join(['Hello', 'word', '黑白课堂'], ' ');
    element.classList.add('h2');
    return element;
}

document.body.appendChild(component());

执行命令npm run build

image.png

加载图片,修改webpack模块规则

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
            ,
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
};

在src/a.png
src/index.js引入

import _ from 'lodash';
import './demo.css';
import Apng from './a.png';

function component() {
    var element = document.createElement('div');

    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    element.innerHTML = _.join(['Hello', 'word', '黑白课堂'], ' ');
    element.classList.add('h2');
    // 将图像添加到我们现有的 div。
    var myIcon = new Image();
    myIcon.src = Apng;
    element.appendChild(myIcon);
    return element;
}

document.body.appendChild(component());

image.png

加载字体也是一样，

后面的待续补充