angular.js - Bagaimanakah pek web melakukan pemuatan langsung?

Question

Mencuba membuat projek menggunakan angular1 webpack es6 saya menghadapi dua masalah ini dalam konfigurasi binaan saya harap anda boleh mendapatkan nasihat:

1. Tukar persekitaran - tukar pembolehubah, alamat api, dll.

2. Selepas menyimpan kod, tidak perlu menyusun dan memuat semula secara manual perubahan CSS boleh disusun secara automatik tanpa memuat semula halaman.

Siarkan konfigurasi semasa.

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