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

时间:2017-08-24 20:42:53

标签: build webpack coffeescript

前言

我目前正在将构建过程从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似乎有问题:

  

找不到模块:错误:无法解析'/ Users / jusopi / Dev / Workspaces / nx / nx-ui / src'中的'./wptest-req'

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

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附加到咖啡文件的所有require语句中。

1 个答案:

答案 0 :(得分:1)

虽然这个解决方案不是特定于咖啡加载器,但确实解决了我的问题。我需要在配置中添加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