angular.js - webpack怎么做到liveload？

问题描述

尝试用angular1+webpack+es6这些东西做个项目， build配置遇到了这2个问题希望可以得到建议：

切换环境-切换变量，api地址等

代码保存以后不用手动编译和刷新， 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;

问题解答

Webpack 有 HMR API 可以用 /a/11...

CSS 的话, 直接在 css-loader 或者 style-loader 当中集成的, 应该很快就好, 只要启动 webpack-dev-server 的时候加上 --hot 参数就好.

js 代码由于涉及到状态问题, 需要额外处理, 特别是 Angular, 要具体看情况了.

开发时使用 webpack-dev-server，不仅支持 liveload，还实现了热更新

执行脚本时设置下变量（如：NODE_ENV=development），在 webpack 配置中读取 process.env.NODE_ENV，这样就可以区分环境了

然后可以编写多个配置文件，一个基础配置，一个是用于开发的配置，一个用于生产环境的配置，这样也可以区分不同的环境

webpack 还提供了 DefinePlugin，可以定义一些全局变量

开启热更新并使用 style 内嵌模式

具体实现可以参考这个：/a/11...

做liveload的不是webpack，而是你的dev server， webpack的devserver支持liveload，一个参数的事，当然你用express什么的自己写server也可以。gulp有watch命令可以监听文件改变，重新跑任务，也可以使用gulp配套的server。

用 webpack/hot/dev-server 就可以啊。我自己总结的 webpack 打包配置：http://yj1438.github.io/2016/...