小编bar*_*lov的帖子

Webpack + React + Typescript

是否可以将Webpack与React和Typescript一起使用,并能够将它们捆绑到Web捆绑包中,但仍然能够调试原始的TypeScript和React代码?在webpack中我使用ts-loader和ts-jsx-loader加上devtool:"source-map",但是当我尝试进行浏览器调试时,我看不到原始的ts代码,而是看到代码已被更改通过webpack.

我目前的基本webpack.config.js文件:

var webpack = require('webpack');
module.exports = {
  entry: ['./app/main.ts'],
  output: {
    path: './build',
    filename: 'bundle.js'
  },
  debug: true,
  devtool: 'source-map',
  plugins: [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ],
  resolve: {
    extensions: ['', '.ts', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts-loader!ts-jsx-loader'
      }
    ]
  }
};
Run Code Online (Sandbox Code Playgroud)

tsconfig.json:

{
    "compileOnSave": false,
    "version": "1.5.0-alpha",
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noLib": false,
        "sourceMap": true,
        "noImplicitAny": true,
        "removeComments": true
    },
    "files": [
        "./AppComponent.ts",
        "./libs/jsx.d.ts",
        "./libs/react.d.ts",
        "./libs/webpack-runtime.d.ts",
        "./main.ts"
    ]
}
Run Code Online (Sandbox Code Playgroud)

例如 …

typescript reactjs webpack

11
推荐指数
1
解决办法
5484
查看次数

标签 统计

reactjs ×1

typescript ×1

webpack ×1