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에는 /a/11...

HMR API를 사용할 수 있습니다.

CSS의 경우 css-loader 또는 style-loader에 직접 통합되어야 하며 webpack-dev-server를 시작할 때 --hot 매개변수만 추가하면 됩니다.

JS 코드는 상태 문제, 특히 Angular와 관련되어 있으므로 추가 처리가 필요합니다.

Answer 2

라이브로드

개발 시 라이브로드 지원뿐만 아니라 핫 업데이트도 구현하는 webpack-dev-server를 사용하세요

환경 전환 - 변수, API 주소 등 전환

1. 스크립트 실행 시 변수(예: NODE_ENV=development)를 설정하고, webpack 구성에서 process.env.NODE_ENV를 읽어 환경을 구분할 수 있도록 하세요

2. 그런 다음 기본 구성, 개발용 구성, 프로덕션 환경용 구성 등 여러 구성 파일을 작성하여 다양한 환경도 구분할 수 있습니다

3. webpack은 일부 전역 변수를 정의할 수 있는 DefinePlugin도 제공합니다

페이지를 새로 고치지 않고 CSS를 변경하세요

핫 업데이트를 활성화하고 스타일 인라인 모드를 사용하세요

구체적인 구현은 /a/11...

을 참조하세요.

Answer 3

라이브로드를 수행하는 것은 웹팩이 아니지만 웹팩의 개발서버는 매개변수의 문제입니다. 물론, Express 등을 사용하여 자체 서버를 작성할 수도 있습니다. Gulp에는 파일 변경 사항을 모니터링하고 작업을 다시 실행할 수 있는 watch 명령이 있습니다. Gulp를 지원하는 서버를 사용할 수도 있습니다.

Answer 4

사용 webpack/hot/dev-server 就可以啊。
我自己总结的 webpack 패키지 구성:
http://yj1438.github.io/2016/...