検索

ホームページ  >  に質問  >  本文

angular.js - webpack怎么做到liveload?

尝试用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;
PHP中文网PHP中文网2744日前706

全員に返信(4)返信します

  • ringa_lee

    ringa_lee2017-05-15 17:07:20

    Webpack では HMR API が利用可能です /a/11...

    CSS の場合は、css-loader または style-loader に直接統合する必要があり、webpack-dev-server の起動時に --hot パラメーターを追加するだけで非常に高速になります。

    JS コードにはステータスの問題が含まれるため、特に Angular では追加の処理が必要です。

    状況によって異なります。

    返事
    0
  • 天蓬老师

    天蓬老师2017-05-15 17:07:20

    ライブロード

    開発時には webpack-dev-server を使用してください。これはライブロードをサポートするだけでなく、ホットアップデートも実装します

    環境の切り替え - 変数、API アドレスなどを切り替えます

    1. 環境を区別できるように、スクリプト実行時に変数(NODE_ENV=developmentなど)を設定し、webpack設定のprocess.env.NODE_ENVを読み込んでください

    2. その後、基本構成、開発用の構成、運用環境用の構成という複数の構成ファイルを作成できるため、異なる環境を区別することもできます

    3. webpack は、いくつかのグローバル変数を定義できる DefinePlugin も提供します

    ページを更新せずにCSSを変更する

    ホットアップデートを有効にし、スタイルインラインモードを使用します

    具体的な実装については、/a/11...

    を参照してください。

    返事
    0
  • 仅有的幸福

    仅有的幸福2017-05-15 17:07:20

    ライブロードを行うのは Webpack ではありませんが、Webpack の devserver はライブロードをサポートします。もちろん、express などを使用して独自のサーバーを作成することもできます。 Gulp には、ファイルの変更を監視し、タスクを再実行できる watch コマンドがあります。gulp をサポートするサーバーを使用することもできます。

    返事
    0
  • 仅有的幸福

    仅有的幸福2017-05-15 17:07:20

    使用するwebpack/hot/dev-server 就可以啊。
    我自己总结的 webpackパッケージ構成:
    http://yj1438.github.io/2016/...

    返事
    0
  • キャンセル返事