如何使webpack使用文件

时间:2017-02-22 19:33:56

标签: javascript typescript webpack

所以我将TypescriptWebpack一起使用。

tsc编译从.ts.js的所有内容,然后我想使用webpack使其可供浏览器使用。但问题是我仍然拥有.js所有这些tsc个文件。 有没有办法告诉webpack

“将所有这些东西打包成一个漂亮的捆绑包,并在你完成后销毁它们!”

1 个答案:

答案 0 :(得分:3)

是的,请使用typescript loader for webpack.

该页面的Configuration section提供了一个示例webpack配置

module.exports = {
  entry: './app.ts',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: ['.ts', '.tsx', '.js'] // note if using webpack 1 you'd also need a '' in the array as well
  },
  module: {
    loaders: [ // loaders will work with webpack 1 or 2; but will be renamed "rules" in future
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: 'ts-loader' }
    ]
  }
}

作为第二个真实世界的例子,这里是我个人webpack.config.js的相应部分,它也设置了babel和(p)反应

module: {
    rules: [
        {
            test: /\.ts(x?)$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'babel-loader',
                    query: {
                        presets: ['es2015']
                    }
                },
                'ts-loader'
            ]
        }
    ]
},
resolve: {
    modules: [
        __dirname,
        'node_modules'
    ],
    extensions: ['.ts','.tsx','.js'],
    alias: {
        'react': 'preact-compat/dist/preact-compat.js',
        'react-dom': 'preact-compat/dist/preact-compat.js'
    }
},