Webpack-dev-server热重装JS / HTML改变了AngularJS

时间:2017-11-07 06:20:01

标签: angularjs webpack webpack-dev-server html-webpack-plugin webpack-hmr

我的项目目录结构是:

mcdist <build output folder>
  - assets
    index.html
  - css
      main.css
  - js
      app.js
      lib.js
  - ng-app
      <all HTML Files>
  - images
src
  - images
      1.png
      2.png
  - javascripts
  - ng-app
     - components
            1.js
     - directives
            2.js
     - filters
            3.js
  - stylesheets
       1.scss
       2.scss
  index.html
  app.js
node_modules
webpack.config.js
package.json

我的webpack.config看起来像这样:

var path = require('path');
var webpack = require('webpack');
var config = {
entry: {
    app: ['./app.js'],
    lib: ['./lib.js']
},
output: {
    path: path.join(__dirname, '/mcdist/assets/js/'),
    filename: 'app.js',
    publicPath: "/public/js/"
},
plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'lib',
        filename: 'lib.js',
        minChunks: Infinity
    }),
    new webpack.NamedModulesPlugin()
],
devServer: {
    proxy: [{
        context: [
            '/mcdist/api',
            '/mcdist/appConfig',
            '/mcdist/j_spring_security_logout'
        ],
        target: 'http://localhost:8080',
        secure: false
    }],
    port: 9000
}
};
module.exports = config

我跑:

webpack-dev-server --inline

我创建了构建文件夹&#39; mcdist&#39;使用npm命令:

"build:js": "uglifyjs mcdist/assets/js/app.js -m -o mcdist/assets/js/app.js",

我的src / app.js看起来像这样:

require('./src/javascripts/ng-app/config/init-config.js');
require('./src/javascripts/ng-app/config/theme-config.js');
require('./src/javascripts/ng-app/components/dialog-message/dialog-message.service.js');
require('./src/javascripts/ng-app/components/footer/footer.controller.js');
require('./src/javascripts/ng-app/components/topbar/topbar.controller.js');

以及app.js中需要格式的列表中的更多文件

现在,每当我对HTML,JS文件进行更改时,我都需要创建新的构建,以便将更改推送到“麦克风”中。文件夹(JS文件在单个app.js中连接和uglified,所有HTML文件都被推送到&mcdist&#39;文件夹内的ng-app文件夹。)

我已经使用RESTART WEBPACK开发服务器来查看反映的更改。

这在本地/开发环境中非常痛苦,因为更改小代码需要构建和重新启动,而Grails应用程序则不然。

有什么方法可以避免重新启动服务器并只是对它们进行热重新加载?我已经尝试过使用--hot和--inline方法但没有运气。

非常感谢帮助。

0 个答案:

没有答案