問題描述

嘗試用angular1+webpack+es6這些東西做個(gè)項(xiàng)目， build配置遇到了這2個(gè)問題希望可以得到建議：

切換環(huán)境-切換變量，api地址等

代碼保存以后不用手動(dòng)編譯和刷新， css改動(dòng)可以自動(dòng)編譯及不用刷新頁面。

貼一下現(xiàn)在的配置。

{ '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 當(dāng)中集成的, 應(yīng)該很快就好, 只要啟動(dòng) webpack-dev-server 的時(shí)候加上 --hot 參數(shù)就好.

js 代碼由于涉及到狀態(tài)問題, 需要額外處理, 特別是 Angular, 要具體看情況了.

開發(fā)時(shí)使用 webpack-dev-server，不僅支持 liveload，還實(shí)現(xiàn)了熱更新

執(zhí)行腳本時(shí)設(shè)置下變量（如：NODE_ENV=development），在 webpack 配置中讀取 process.env.NODE_ENV，這樣就可以區(qū)分環(huán)境了

然后可以編寫多個(gè)配置文件，一個(gè)基礎(chǔ)配置，一個(gè)是用于開發(fā)的配置，一個(gè)用于生產(chǎn)環(huán)境的配置，這樣也可以區(qū)分不同的環(huán)境

webpack 還提供了 DefinePlugin，可以定義一些全局變量

開啟熱更新并使用 style 內(nèi)嵌模式

具體實(shí)現(xiàn)可以參考這個(gè)：/a/11...

做liveload的不是webpack，而是你的dev server， webpack的devserver支持liveload，一個(gè)參數(shù)的事，當(dāng)然你用express什么的自己寫server也可以。gulp有watch命令可以監(jiān)聽文件改變，重新跑任務(wù)，也可以使用gulp配套的server。

用 webpack/hot/dev-server 就可以啊。我自己總結(jié)的 webpack 打包配置：http://yj1438.github.io/2016/...