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 has HMR API available /a/11...

For CSS, it should be integrated directly in css-loader or style-loader, which should be very fast. Just add the --hot parameter when starting webpack-dev-server.

JS code needs additional processing because it involves status issues, especially Angular. It depends on the situation.

Answer 2

liveload

Use webpack-dev-server when developing, which not only supports liveload, but also implements hot updates

Switch environment - switch variables, api address, etc.

1. Set the variable (such as: NODE_ENV=development) when executing the script, and read process.env.NODE_ENV in the webpack configuration, so that the environment can be distinguished

2. You can then write multiple configuration files, a basic configuration, a configuration for development, and a configuration for production environment, so that different environments can also be distinguished

3. webpack also provides DefinePlugin, which can define some global variables

Change css without refreshing the page

Enable hot update and use style inline mode

For specific implementation, please refer to this: /a/11...

Answer 3

It is not webpack that does liveload, but your dev server. Webpack's devserver supports liveload, which is a matter of parameters. Of course, you can also write your own server using express or something. Gulp has a watch command that can monitor file changes and re-run tasks. You can also use the server supporting gulp.

Answer 4

Use webpack/hot/dev-server 就可以啊。
我自己总结的 webpack package configuration:
http://yj1438.github.io/2016/...