angular.js - webpack怎么做到liveload？

Question

尝试用angular1+webpack+es6这些东西做个项目， build配置遇到了这2个问题希望可以得到建议：

1. 切换环境-切换变量，api地址等

2. 代码保存以后不用手动编译和刷新， css改动可以自动编译及不用刷新页面。

贴一下现在的配置。

{
  "name": "kaas",
  "version": "1.0.0",
  "description": "",
  "title":"KAASSSSS",
  "main": "index.js",
  "dependencies": {
    "angular": "^1.5.8",
    "angular-animate": "^1.5.8",
    "angular-ui-bootstrap": "^2.0.1",
    "angular-ui-router": "^0.3.1",
    "font-awesome": "^4.6.3",
    "lodash": "^4.14.2"
  },
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.13.2",
    "css-loader": "^0.23.1",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.22.0",
    "ng-annotate-loader": "^0.1.1",
    "node-sass": "^3.8.0",
    "path": "^0.12.7",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rm -rf www/* && webpack -p",
    "dev": "webpack-dev-server --port 9100 --watch --progress --colors"
  },
  "author": "Jin",
  "license": "ISC"
}

var path = require('path'),
    webpack = require("webpack"),
    srcPath = path.join(__dirname, 'src'),
    wwwPath = path.join(__dirname, 'www'),
    pkg = require('./package.json'),
    HtmlWebpackPlugin = require('html-webpack-plugin');


var config = {
    entry: path.join(srcPath, 'index.js'),
    output: {
        path: path.join(wwwPath),
        filename: 'bundle.js'
    },
    module: {
        loaders: [ {
            test: /\.(png|jpg)$/,
            loader: 'file?name=img/[name].[ext]'
        }, {
            test: /\.css$/,
            loader: "style!css"
        }, {
            test: /\.scss$/,
            loader: "style!css!autoprefixer!sass"
        }, {
            test: /\.js$/,
            exclude: /(node_modules)/,
            loader: "ng-annotate?add=true!babel?presets[]=es2015"
        }, {
            test: [/fontawesome-webfont\.svg/, /fontawesome-webfont\.eot/, /fontawesome-webfont\.ttf/, /fontawesome-webfont\.woff/, /fontawesome-webfont\.woff2/],
            loader: 'file?name=fonts/[name].[ext]'
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename:'index.html',
            template: path.join(srcPath, 'index.html')
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.DedupePlugin()
    ]
};

module.exports = config;

Answer 1

Webpack a l'API HMR disponible /a/11...

Pour CSS, il doit être intégré directement dans css-loader ou style-loader, ce qui devrait être très rapide. Ajoutez simplement le paramètre --hot lors du démarrage de webpack-dev-server.

Le code JS nécessite un traitement supplémentaire car il implique des problèmes de statut, notamment Angular. Cela dépend de la situation.

Answer 2

liveload

Utilisez webpack-dev-server lors du développement, qui prend non seulement en charge le liveload, mais implémente également les mises à jour à chaud

Changer d'environnement - changer de variables, d'adresse API, etc.

1. Définissez la variable (telle que : NODE_ENV=development) lors de l'exécution du script, et lisez process.env.NODE_ENV dans la configuration du webpack, afin que l'environnement puisse être distingué

2. Vous pouvez ensuite écrire plusieurs fichiers de configuration, une configuration de base, une configuration pour le développement et une configuration pour l'environnement de production, afin que différents environnements puissent également être distingués

3. webpack fournit également DefinePlugin, qui peut définir certaines variables globales

Changer le CSS sans actualiser la page

Activez les mises à jour à chaud et utilisez le mode style en ligne

Pour une implémentation spécifique, veuillez vous référer à ceci : /a/11...

Answer 3

Ce n'est pas webpack qui effectue le liveload, mais le serveur de développement de votre Webpack prend en charge le liveload. Bien sûr, vous pouvez également écrire votre propre serveur en utilisant express ou quelque chose du genre. Gulp dispose d'une commande watch qui peut surveiller les modifications de fichiers et réexécuter les tâches. Vous pouvez également utiliser le serveur prenant en charge gulp.

Answer 4

Utilisez simplement webpack/hot/dev-server.
Mon propre résumé webpack Configuration du packaging :
http://yj1438.github.io/2016/...