当tsc是时,webpack无法捆绑文件

时间:2018-07-25 22:31:13

标签: typescript webpack node-modules tsc

我在使用webpack构建文件时遇到了一些麻烦。它只会吐出一堆相同格式的错误,并说:

ev_stat

似乎没有正确加载node_modules。

tsc和ts-node都可以正常构建/运行项目。这是我的配置:

tsconfig.json

ERROR in ./node_modules/typescript-rest/dist/server.js
Module not found: Error: Can't resolve 'typescript-ioc/es6' in '/Users/Jack/NODE/ts-rest-session/node_modules/typescript-rest/dist'

webpack.config.js

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "lib": ["es2015", "dom"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

如果有人有任何想法,我将为您服务!我尝试从webpack.config.json中的module.rules [0]排除项中删除module.exports = { entry: { server: './server.ts' }, module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ } ] }, resolve: { modules: ["node_modules"] extensions: ['.tsx', '.ts', '.js', '.json'] }, output: { filename: '[name].bundle.js', path: __dirname + 'dist' } };

1 个答案:

答案 0 :(得分:3)

如果要根据tsconfig.json中的baseUrl和路径解析模块,则可以使用tsconfig-paths-webpack-plugin包。有关此功能的详细信息,请参阅模块解析文档。

此功能需要webpack 2.1+和TypeScript 2.0+。使用下面的配置或检查程序包以获取有关用法的更多信息。

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
...
    resolve: {
        plugins: [new TsconfigPathsPlugin({ /*configFile: "./path/to/tsconfig.json" */ })]
        }
...
}

https://github.com/TypeStrong/ts-loader/blob/master/README.md


编辑

似乎您正在尝试为节点构建一些东西,默认情况下是为Web构建webpack。因此,您必须将正确的目标放在webpack.config中。另外,您在resolve中缺少“,”,并且您的输出路径应类似于path:__dirname +'/ dist'

我试图重现您的问题,并且此配置对我来说效果很好:

var nodeExternals = require('webpack-node-externals');

module.exports = {
  mode: 'development',
  entry: './server.ts',
  // in order to ignore built-in modules like path, fs, etc. 
  target: 'node', 
  // in order to ignore all modules in node_modules folder
  externals: [nodeExternals()], 
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },

  // Enable sourcemaps for debugging webpack's output.
  devtool: 'source-map',

  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: ['.ts', '.tsx', '.js', '.json']
  },

  module: {
    rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader',
      },

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader'
      },
    ]
  },
};