angular.js - webpack怎么做到liveload?
Jennifer Aniston
Jennifer Aniston 2017-05-15 17:05:20
0
4
656

尝试用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;
Jennifer Aniston
Jennifer Aniston

认证高级PHP讲师

全部回复 (4)
左手右手慢动作

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

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

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

    Peter_Zhu

    liveload

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

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

    1. 执行脚本时设置下变量(如:NODE_ENV=development),在 webpack 配置中读取 process.env.NODE_ENV,这样就可以区分环境了

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

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

    改变 css 不刷新页面

    开启热更新并使用 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/...

          最新下载
          更多>
          网站特效
          网站源码
          网站素材
          前端模板
          关于我们 免责声明 Sitemap
          PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!