angular.js - How does webpack do liveload?

Question

Trying to make a project using angular1 webpack es6. I encountered these two problems in the build configuration. I hope you can get some advice:

1. Switch environment - switch variables, api address, etc.

2. After saving the code, there is no need to manually compile and refresh. CSS changes can be automatically compiled without refreshing the page.

Post the current configuration.

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