3、webpack管理资源-加载css文件

※项目使用前文webpack起步建立的项目

1）安装css-loader和styple-loader

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

2）修改webpack.config.js，追加css模块加载规则

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

 

3）添加src/style.css文件

.hello { color: red }

4）修改src/index.js文件，使用style.css文件

import _ from 'lodash';
import './style.css'; // 导入css文件

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

    element.innerHTML = _.join(['Hello', 'webpack'], '--');
    // 组件元素追加class样式
    element.classList.add('hello');

    return element;
}

document.body.appendChild(component());

5）编译查看结果 

npm run build