尝试用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;
ringa_lee2017-05-15 17:07:20
Webpack では HMR API が利用可能です /a/11...
CSS の場合は、css-loader または style-loader に直接統合する必要があり、webpack-dev-server の起動時に --hot パラメーターを追加するだけで非常に高速になります。
JS コードにはステータスの問題が含まれるため、特に Angular では追加の処理が必要です。状況によって異なります。
天蓬老师2017-05-15 17:07:20
開発時には webpack-dev-server を使用してください。これはライブロードをサポートするだけでなく、ホットアップデートも実装します
環境を区別できるように、スクリプト実行時に変数(NODE_ENV=developmentなど)を設定し、webpack設定のprocess.env.NODE_ENVを読み込んでください
その後、基本構成、開発用の構成、運用環境用の構成という複数の構成ファイルを作成できるため、異なる環境を区別することもできます
webpack は、いくつかのグローバル変数を定義できる DefinePlugin も提供します
ホットアップデートを有効にし、スタイルインラインモードを使用します
を参照してください。具体的な実装については、/a/11...
仅有的幸福2017-05-15 17:07:20
ライブロードを行うのは Webpack ではありませんが、Webpack の devserver はライブロードをサポートします。もちろん、express などを使用して独自のサーバーを作成することもできます。 Gulp には、ファイルの変更を監視し、タスクを再実行できる watch コマンドがあります。gulp をサポートするサーバーを使用することもできます。
仅有的幸福2017-05-15 17:07:20
使用するwebpack/hot/dev-server
就可以啊。
我自己总结的 webpack
パッケージ構成:
http://yj1438.github.io/2016/...