Блог

Я внедрил Webpack HMR в свой проект AngularJS 1.7.2. Если я что-то изменю в файлах .js и сохраню, у меня будет горячее обновление без обновления.

Однако все, что находится под app.controller или что-либо еще, созданное AngularJS, не работает.

Например:

 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();
}