html - 如何配置立即进行更改的 webpack 或 typescript ？

Question

我已经实现了 webpack，以便它从我的 Angular 应用程序生成一个文件。网页包.js

现在的问题是每当我更改 TypeScript 文件时，我都必须重新运行 webpack 才能看到效果。

这大大减慢了开发速度。

如何配置 webpack 或 typescript 以立即进行更改？

webpack.config.js:

const webpack = require('webpack');

module.exports = {
    entry: {
        app: './app/main.js',
        vendor: './app/vendor.js'
    },
    output: {
        //path: './bin',
        filename: 'webpack/webpack-[name].js'
    },
    resolve: {
        extensions: ['', '.js', '.ts']
    },
    devtool: 'source-map',
    module: {
        loaders: [
            { test: /\.ts$/, loader: 'ts-loader' },
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.css$/, loaders: ['style', 'css'] },
            { test: /\.json/, loaders: ['json-loader'] },
            { test: /\.html/, loaders: ['raw-loader'] },
            { test: /\.(jpg|png|gif)$/, loaders: ['file-loader'] }
        ]}
     // Add minification
    , plugins: [
      new webpack.optimize.UglifyJsPlugin({
          compress: {
              warnings: false
          },
          output: {
              comments: false
          }
      })
    ]
};

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
    }
}

Answer 1

How can I configure the webpack or typescript that changes are made immediately

实际配置如何运行 webpack。如果您使用 webpack --watch 它会在您进行更改后立即自动更新包，但是您仍然需要刷新浏览器页面。如果您使用 webpack-dev-server 会更好，因为 webpack-dev-server --hot --inline 甚至会立即重新加载您的浏览器页面。