webpack学习笔记二

webpack loader 加载其他类型的资源

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

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

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

src下新建style.css

  .hello {
      color: red;
    }

src/index.js

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

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

    // lodash 是由当前 script 脚本 import 导入进来的
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
   element.classList.add('hello');

    return element;
  }

  document.body.appendChild(component());

加载图片或字体 npm install --save-dev file-loader
加载数据 npm install --save-dev csv-loader xml-loader

webpack.config.js

rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|svg|gif|)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ]
            }
        ]

index.js

import _ from 'lodash';
import './style.css';
import indexImg from './index.png';
import data from './data.xml';

style.css (字体文件可以是ttf格式，format(‘woff’)不能是‘ttf’)

@font-face {
    font-family: 'MyFont';
    src: url("./my-font.ttf") format('woff');
    font-weight: 600;
    font-style: normal;
}

.hello {
    color: red;
    background: url('./index.png');
    font-family: 'MyFont';
    font-size: 35px;
}

当前目录结构

npm run build  查看效果