如何配置立即进行更改的 webpack 或 typescript？答案

【问题标题】：How can I configure the webpack or typescript that changes are made immediately?如何配置立即进行更改的 webpack 或 typescript？
【发布时间】：2017-04-17 07:09:37
【问题描述】：

我已经实现了 webpack，以便它从我的 Angular 应用程序中生成一个文件。 webpack.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
    }
}

【问题讨论】：

你可以使用 webpack-dev-server。它监视您的源文件并在检测到更改时重新编译。 webpack.github.io/docs/webpack-dev-server.html
Webpack 还有一个 --watch 命令，它可以监视更改并重新运行命令..

标签： html css angular typescript webpack

【解决方案1】：

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

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

【讨论】：