Question

我在这个配置中使用webpack：

var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    context: __dirname + '/app',
    entry: {
        app: './app.js',
        vendor: ['angular', 'angular-route', 'angular-resource', 'angular-bootstrap']  
    },
    output: {
        path: __dirname + '/app',
        filename: 'js/app.bundle.min.js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"js/vendor.bundle.min.js"),
        new CopyWebpackPlugin([
            { from: "../node_modules/bootstrap/dist/fonts/", to:"fonts/"},
            { from: "../node_modules/bootstrap/dist/css/bootstrap.min.css", to:"css/"}
        ]),   
        new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            sourceMap: false,
            mangle: false
        })
    ]
};

在我的package.json的脚本中，我有：

scripts": {
    "clean": "rimraf ../assets",
    "prestart": "npm install",
    "build": "webpack",
    "start": "webpack-dev-server -d --hot --inline --content-base ./app"
  },

当我在没有停止并启动服务器的情况下更改js文件中的所有内容时，可以重新加载应用程序吗？

Answer 1

查看angular-hot-reloader。它基于一些简单的webpack加载器，它们只是为每个可重新加载的文件添加一小段代码。这段代码将文件声明为可重新加载到webpack，然后做一些hacky魔术，使角度意识到更改，重新编译模块的范围，并修补控制器的原型方法。

用法：

const componentHotLoader = require.resolve('../loaders/component-loader');
const serviceHotLoader = require.resolve('../loaders/service-loader');
const jadeHotLoader = require.resolve('../loaders/jade-loader');


// add componentHotLoader and serviceLoader
(webpackConf.module.preLoaders = webpackConf.module.preLoaders || []).push(
  { test: /\.component\.js$/, loader: componentHotLoader, exclude: [/client\/lib/, /node_modules/, /\.spec\.js/] }
);
(webpackConf.module.preLoaders = webpackConf.module.preLoaders || []).push(
  { test: /\.service\.js$/, loader: serviceHotLoader, exclude: [/client\/lib/, /node_modules/, /\.spec\.js/] }
);
(webpackConf.module.postLoaders = webpackConf.module.postLoaders || []).push(
  { test: /\.html/, loader: jadeHotLoader }
);

您可以将此example用作参考

使用webpack重新加载angularjs

1 个答案:

用法：