尝试用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, 要具体看情况了.
liveload
开发时使用 webpack-dev-server,不仅支持 liveload,还实现了热更新
切换环境-切换变量,api地址等
执行脚本时设置下变量(如:NODE_ENV=development),在 webpack 配置中读取 process.env.NODE_ENV,这样就可以区分环境了
然后可以编写多个配置文件,一个基础配置,一个是用于开发的配置,一个用于生产环境的配置,这样也可以区分不同的环境
webpack 还提供了 DefinePlugin,可以定义一些全局变量
改变 css 不刷新页面
开启热更新并使用 style 内嵌模式
做liveload的不是webpack,而是你的dev server, webpack的devserver支持liveload,一个参数的事,当然你用express什么的自己写server也可以。gulp有watch命令可以监听文件改变,重新跑任务,也可以使用gulp配套的server。
用
webpack/hot/dev-server
就可以啊。我自己总结的
webpack
打包配置:http://yj1438.github.io/2016/...