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

Posted 2023-03-13

【中文标题】如何配置立即进行更改的 webpack 或 typescript？

【英文标题】：How can I configure the webpack or typescript that changes are made immediately?

【发布时间】：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 命令，它可以监视更改并重新运行命令..

【参考方案1】：

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

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