Question

首先需要更新代码，使用 require() 来加载静态资源，同 node 中使用 require() 的方式类似：

require('./bootstrap.css');
require('./myapp.less');

var img = document.createElement('img');
img.src = require('./glyph.png');

当引入 CSS（如 less 文件等）时，webpack 会把 CSS 内容作为字符串内联到 JS 中，同时 require() 会在页面中插入标签来引入 CSS 文件内容。引入图片的时候，webpack 内联的是图片的 URL 地址，require() 返回的也是该地址。

但是你需要提前配置 webpack（这里又会用到 loader）。

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    path: './build', // 图片和 JS 目录
    publicPath: 'http://mycdn.com/', // 用来生成 URL 地址，如图片地址
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.less$/, loader: 'style-loader! css-loader! less-
          loader' },
      // 使用！ 来连接多个 loader
      { test: /\.css$/, loader: 'style-loader! css-loader' },
      {test: /\.(png|jpg)$/, loader: 'url-loader? limit=8192'}
      // 小于 8KB 的图片使用内联的 base64 来编码，其余的使用 URL
    ]
  }
};