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/...