angulaire.js - Comment Webpack effectue-t-il le chargement en direct?

Question

En essayant de créer un projet en utilisant angulaire1 webpack es6, j'ai rencontré ces deux problèmes dans la configuration de build. J'espère que vous pourrez obtenir des conseils :

.

1. Changer d'environnement - changer de variables, d'adresse API, etc.

2. Après avoir enregistré le code, il n'est pas nécessaire de compiler manuellement et d'actualiser les modifications CSS peuvent être automatiquement compilées sans actualiser la page.

Publiez la configuration actuelle.

{
  "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 l'API HMR disponible /a/11...

Pour CSS, il doit être intégré directement dans css-loader ou style-loader, ce qui devrait être très rapide. Ajoutez simplement le paramètre --hot lors du démarrage de webpack-dev-server.

Le code JS nécessite un traitement supplémentaire car il implique des problèmes de statut, notamment Angular. Cela dépend de la situation.

Answer 2

liveload

Utilisez webpack-dev-server lors du développement, qui prend non seulement en charge le liveload, mais implémente également les mises à jour à chaud

Changer d'environnement - changer de variables, d'adresse API, etc.

1. Définissez la variable (telle que : NODE_ENV=development) lors de l'exécution du script, et lisez process.env.NODE_ENV dans la configuration du webpack, afin que l'environnement puisse être distingué

2. Vous pouvez ensuite écrire plusieurs fichiers de configuration, une configuration de base, une configuration pour le développement et une configuration pour l'environnement de production, afin que différents environnements puissent également être distingués

3. webpack fournit également DefinePlugin, qui peut définir certaines variables globales

Changer le CSS sans actualiser la page

Activez les mises à jour à chaud et utilisez le mode style en ligne

Pour une implémentation spécifique, veuillez vous référer à ceci : /a/11...

Answer 3

Ce n'est pas webpack qui effectue le liveload, mais le serveur de développement de votre Webpack prend en charge le liveload. Bien sûr, vous pouvez également écrire votre propre serveur en utilisant express ou quelque chose du genre. Gulp dispose d'une commande watch qui peut surveiller les modifications de fichiers et réexécuter les tâches. Vous pouvez également utiliser le serveur prenant en charge gulp.

Answer 4

Utilisez simplement webpack/hot/dev-server.
Mon propre résumé webpack Configuration du packaging :
http://yj1438.github.io/2016/...