如果你希望在require文件时省略文件的扩展名, 只需要在webpack.config.js中添加resolve.extensions来配置。

// webpack.config.js module.exports = { entry: './main.js', output: { filename: 'bundle.js' }, module: { loaders: [ { test: /\.coffee$/, loader: 'coffee-loader' }, { test: /\.js$/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] }, resolve: { // 现在你require文件的时候可以直接使用require('file'), 不用使用require('file.coffee') extensions: ['', '.js', '.json', '.coffee'] } }; css样式和图片的加载

首先你需要用require()去加载你的静态资源(named as they would with node'srequire()):

require('./bootstrap.css'); require('./myapp.less'); var img = document.createElement('img'); img.src = require('./glyph.png');

当你require了CSS(less或者其他)文件, webpack会在页面中插入一个内联的<style>, 去引入样式。当require图片的时候, bundle文件会包含图片的url, 并通过require()返回图片的url。

但是这需要你在webpack.config.js做相应的配置(这里还是使用loaders)

// webpack.config.js module.exports = { entry: './main.js', output: { path: './build', // 图片和js会放在这 publicPath: 'http://mycdn.com/', // 这里用来生成图片的地址 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' // 内联的base64的图片地址, 图片要小于8k, 直接的url的地址则不解析 } ] } }; 功能标识（Feature flags）