加载Css

webpack并不能处理js以外的静态资源，通过loader来支持他们

npm install --save-dev style-loader css-loader  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'+         ]+       }+     ]+   }  };

加载图片

file-loader可以处理图片资源，字体资源

npm install --save-dev file-loader  import _ from 'lodash';  import './style.css';+ import Icon from './icon.png';  function component() {    var element = document.createElement('div');    // Lodash，现在由此脚本导入    element.innerHTML = _.join(['Hello', 'webpack'], ' ');    element.classList.add('hello');+   // 将图像添加到我们现有的 div。+   var myIcon = new Image();+   myIcon.src = Icon;++   element.appendChild(myIcon);    return element;  }  document.body.appendChild(component());  //css里面引入也是没问题的  .hello {    color: red;+   background: url('./icon.png');  }     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'          ]        },        {          test: /\.(png|svg|jpg|gif)$/,          use: [            'file-loader'          ]        },+       {+         test: /\.(woff|woff2|eot|ttf|otf)$/,+         use: [+           'file-loader'+         ]+       }      ]    }  };

加载数据

npm install --save-dev csv-loader xml-loader  {+         test: /\.(csv|tsv)$/,+         use: [+           'csv-loader'+         ]+       },+       {+         test: /\.xml$/,+         use: [+           'xml-loader'+         ]+       }