Question

webpack 中有一个 loader 的工具，它与 browserify 中的 transforms 及 RequireJS 插件的功能类似。下面的代码展示了如何使用它来加载 CofferScript 和 Facebook JSX-ES6（你需要提前执行 npm install jsx-loader coffee-loader）：

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee-loader' },
      { test: /\.js$/, loader: 'jsx-loader? harmony' }
      // loaders 可以接受 querystring 格式的参数
    ]
  }

};

如果要开启文件后缀名的自动补全功能，你需要设置 resolve.extensions 参数值来指明哪些文件是 webpack 需要搜索处理的：

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee-loader' },
      { test: /\.js$/, loader: 'jsx-loader? harmony' }
      // loaders 可以接受 querystring 格式的参数
    ]
  },
  resolve: {
    // 现在可以使用 require('file') 来替代 require('file.coffee') 了
    extensions: ['', '.js', '.json', '.coffee']
  }
};