在不明确声明“.coffee”文件扩展名的情况下使用 Webpack 的 Coffee-Loader

Question

前言

我目前正在将我们的构建过程从 Browserify 切换到 Webpack。由于该项目使用了大量的咖啡脚本，我有很多导入语句，例如：

require('./coffee-file-without-extension') # note the lack of .coffee
require('./legacy-js-file-without-extension') # note the lack of .js

问题

Browserify 可以很好地处理文件扩展名的缺失。 Webpack 似乎有这个错误的问题：

Module not found: Error: Can't resolve './wptest-req' in '/Users/jusopi/Dev/Workspaces/nx/nx-ui/src'

我为此设置了一个超级简单的测试项目，其中包含以下文件：

wptest.coffee

require('./wptest-req')

wptest-req.coffee

module.exports = {}

webpack.config.js

const path = require('path');
const webpack = require('webpack')

module.exports = {

  entry: {
    main: './src/wptest.coffee'
  },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common' // Specify the common bundle's name.
   })
  ],

  module: {
    rules: [
        {
            test: /\.coffee$/,
            use: [
                {
                    loader: 'coffee-loader',
                    options: { sourceMap: true }
                }
            ]   
        }
    ]
  }
};

最终目标

我希望我不必遍历我们应用程序中的每个文件并将.coffee附加到所有要求如果可能的话，咖啡文件的声明。

Answer 1

虽然此解决方案并非特定于 coffee-loader，但它确实解决了我的问题。我需要在我的配置中添加一个 resolve 对象：

const path = require('path');
const webpack = require('webpack')

module.exports = {

    entry: {
        main: './src/main.coffee'
        // other: './src/index2.js'
    },

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
          name: 'common' // Specify the common bundle's name.
        })
    ],

    module: {
        rules: [
            {
                test: /\.coffee$/,
                use: [
                    {
                        loader: 'coffee-loader',
                        options: { sourceMap: true }
                    }
                ]
            }
        ]
    },

    resolve: {
        extensions: [ '.coffee', '.js' ]
    }
};

src - https://github.com/webpack-contrib/coffee-loader/issues/36

在不明确声明“.coffee”文件扩展名的情况下使用 Webpack 的 Coffee-Loader

Using Webpack's Coffee-Loader without explicitly stating ".coffee" file extension

build

coffeescript

webpack

前言

问题

最终目标