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 有 HMR API 可以用 /a/11...

CSS 的話, 直接在 css-loader 或 style-loader 當中集成的, 應該很快就好, 只要啟動 webpack-dev-server 的時候加上 --hot 參數就好.

js 程式碼由於涉及到狀態問題, 需要額外處理, 特別是 Angular, 要具體看情況了.

Answer 2

liveload

開發時使用 webpack-dev-server，不僅支援 liveload，也實作了熱更新

切換環境-切換變量，api位址等

1. 執行腳本時設定下變數（如：NODE_ENV=development），在 webpack 配置中讀取 process.env.NODE_ENV，這樣就可以區分環境了

2. 接著可以編寫多個配置文件，一個基礎配置，一個是用於開發的配置，一個用於生產環境的配置，這樣也可以區分不同的環境

3. webpack 也提供了 DefinePlugin，可以定義一些全域變數

改變 css 不刷新頁面

開啟熱更新並使用 style 內嵌模式

具體實作可以參考這個：/a/11...

Answer 3

做liveload的不是webpack，而是你的dev server， webpack的devserver支援liveload，一個參數的事，當然你用express什麼的自己寫server也可以。 gulp有watch指令可以監聽檔案改變，重新跑任務，也可以使用gulp配套的server。

Answer 4

用 webpack/hot/dev-server 就可以啊。
我自己总结的 webpack 打包配置：
http://yj1438.github.io/2016/...