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 mempunyai API HMR tersedia /a/11...

Untuk CSS, ia harus disepadukan secara langsung dalam css-loader atau style-loader, yang sepatutnya sangat pantas hanya tambah parameter --hot apabila memulakan webpack-dev-server.

Kod JS memerlukan pemprosesan tambahan kerana ia melibatkan isu status, terutamanya Angular Ia bergantung pada situasi.

Answer 2

muatan langsung

Gunakan webpack-dev-server semasa membangun, yang bukan sahaja menyokong muat langsung, tetapi juga melaksanakan kemas kini hangat

Tukar pembolehubah suis persekitaran, alamat api, dll.

1. Tetapkan pembolehubah (seperti: NODE_ENV=development) semasa melaksanakan skrip dan baca process.env.NODE_ENV dalam konfigurasi webpack, supaya persekitaran boleh dibezakan

2. Anda kemudian boleh menulis berbilang fail konfigurasi, konfigurasi asas, konfigurasi untuk pembangunan dan konfigurasi untuk persekitaran pengeluaran, supaya persekitaran yang berbeza juga boleh dibezakan

3. pak web juga menyediakan DefinePlugin, yang boleh menentukan beberapa pembolehubah global

Tukar css tanpa memuat semula halaman

Dayakan kemas kini hangat dan gunakan mod sebaris gaya

Untuk pelaksanaan khusus, sila rujuk ini: /a/11...

Answer 3

Bukan pek web yang melakukan pemuatan langsung, tetapi pelayan pengembang Webpack anda menyokong pemuatan langsung. Sudah tentu, anda juga boleh menulis pelayan anda sendiri menggunakan ekspres atau sesuatu. Gulp mempunyai arahan jam tangan yang boleh memantau perubahan fail dan menjalankan semula tugas Anda juga boleh menggunakan pelayan yang menyokong tegukan.

Answer 4

Gunakan sahaja webpack/hot/dev-server.
Ringkasan saya sendiri webpack Konfigurasi pembungkusan:
http://yj1438.github.io/2016/...