webpack loader加载css、图片

 

1. 加载 样式文件 .css

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

2.webpack 加入module 配置

//提供目录
const path = require('path');

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

3. 页面引入css文件

function component() {
    var element = document.createElement('div');
  
    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('webpack-TextColor');

    return element;
  }
  
  document.body.appendChild(component());

4. 图片加载：

npm install --save-dev file-loader

5. 在webpack.config.json配置

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

6. 在css文件和js文件中应用方式

 .webpack-TextColor {
    color :red;
    width: 100px;
    height: 200px;
    background-size:100px 200px;
    background: url('./image/a.png');
 }

import Icon from './image/a.png';

7. 其他的字体文件，或者 json ,xml 等处理类似