1

我已经在我的 AngularJS 1.7.2 项目中实现了 Webpack HMR。如果我更改 .js 文件中的某些内容并保存，我会在不刷新的情况下进行热更新。

但是，app.controllerAngularJS 下的所有内容或其他任何内容都不起作用。

例如：

module.exports = app => {

 console.log(1); // will be hot updated

 app.controller("myCtrl", () => console.log(2)); // will not update in case I change the 2 to 3, or something else.

}

这是 webpack.config.js 文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = (env, argv) => {
  return {
    entry: './src/webpack.entry.js',
    output: {
      filename: 'bundle.js',
      chunkFilename: '[name].bundle.js',
      path: path.resolve(__dirname, './www')
    },
    plugins: [
      // new HtmlWebpackPlugin({
      //   template: "./src/index.html"
      // }),
      new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
      contentBase: path.resolve(__dirname, './www'),
      hot: true,
      inline: true
    },
    // devtool: argv.mode == "development" ? 'inline-source-map' : false,
    module: {
      rules: [
        {
          test: /\.(html)$/,
          exclude: /node_modules/,
          use: {
            loader: 'html-loader',
            options: {
              attrs: [':data-src']
            }
          }
        },
        {
          test: /\.(woff(2)?|ttf|eot|svg|jpg|jpeg|png|jpg|gif)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'file-loader',
              options: {}
            }
          ]
        },
        {
          test: /\.css$/,
          exclude: /node_modules/,
          use: [
            'style-loader',
            'css-loader',
          ]
        },
        // {
        //   test: /\.scss$/,
        //   exclude: /node_modules/,
        //   use: [
        //     'sass-loader'
        //   ]
        // }
      ]
    },
    optimization: {
      minimize: false
    }
  };
}

我也想提供 webpack.entry.js 文件：

// angularjs app first initialization
var app = require('./app/app');

// ionic core css
require('./assets/css/ionic.bundle.css');

// app scripts
require('./app/index')(app);

// screens scripts
require('./screens/index')(app);

// assets
require('./assets/css/custom-both.css');

// NOTE: without this, it fully reloads the webpage instead of making it hot reload - even when the config sets with hot:true
if (module.hot) {
  module.hot.accept();
}
4

0 回答 0