Vue提供了一個很好的命令行工具：vue-cli，用來快速構(gòu)建Vue項目。
現(xiàn)在，我們改造一個由vue-cli創(chuàng)建的simple project蠢挡，使其提供更強大的功能。
1. 創(chuàng)建一個簡單的Vue項目
vue init webpack-simple my-webpack-simple-demo
2. package.json
{
...
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --env=integrate",
"build-test": "cross-env NODE_ENV=production webpack --progress --hide-modules --env=test",
"build-release": "cross-env NODE_ENV=production webpack --progress --hide-modules --env=release"
},
"dependencies": {
"vue": "^2.2.1"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"clean-webpack-plugin": "^0.1.15",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"element-ui": "^1.2.3",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.0",
"sass-loader": "^5.0.1",
"style-loader": "^0.13.2",
"url-loader": "^0.5.8",
"vue-cookie": "^1.1.3",
"vue-loader": "^11.0.0",
"vue-resource": "^1.2.1",
"vue-router": "^2.3.0",
"vue-style-loader": "^2.0.3",
"vue-template-compiler": "^2.2.1",
"vuex": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
3. 文件結(jié)構(gòu)
webpack.png
4. .babelrc
Babel是ES6轉(zhuǎn)碼器，可以將項目中用到的ES6語法編譯為ES5語法业踏。
我們需要安裝babel-loader babel-core禽炬，然后新增.babelrc文件：
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
5.webpack.config.js
詳解請看注釋：
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var srcPath = path.join(__dirname, './src/');
/*-----------------根據(jù)process變量找到對應的webconfig文件-----------------*/
function getEnv() {
var argv = process.argv.slice(2);
for (var i = 0; i < argv.length; i++) {
if (argv[i].indexOf('--env=') >= 0) {
return argv[i].substr(6);
}
}
}
//webconfig是api配置文件。一般來說勤家，不同的環(huán)境后臺api地址會不同
//例如：test環(huán)境下腹尖，api為http://test.api.com;
//release環(huán)境下，api為http://release.api.com;
//需要根據(jù)不同的環(huán)境伐脖，把api配置給相應的ajax插件热幔，如vue-resource, axios
//例如，配置vue-resource: Vue.http.options.root = webconfig.host;
var env = getEnv();
var configPath = '';
switch (env) {
case 'test' :
configPath = path.join(__dirname, './src/config/webconfig_test.js');
break;
default :
configPath = path.join(__dirname, './src/config/webconfig_release.js');
}
/*-----------------webpack 配置-----------------*/
module.exports = {
//完整寫法為entry:{main: './src/main.js'}讼庇，所以绎巨，[name]默認為"main"
//也可以按照喜好自行定義[name]的名字
entry: './src/main.js',
output: {
//必須是絕對路徑（所以這里用到的是path.resolve，而不是path.join）
//指定文件打包的輸入目錄
path: path.resolve(__dirname, './dist'),
//output.path中的URL以HTML頁面為基準蠕啄，表示資源的發(fā)布地址
//當配置過該屬性后场勤，打包文件中所有通過相對路徑引用的資源都會被配置的路徑所替換
// webpack-dev-server也會默認從publicPath為基準，使用它來決定在哪個目錄下啟用服務介汹，來訪問webpack輸出的文件。
publicPath: '/',
// 指定輸出文件的名稱舶沛，[hash]會自動給文件名加上hash后綴
filename: 'js/build-[hash].js',
//異步加載的JS文件不會被打包到output->path下嘹承，所以需要為其做專門配置
//[id]會自動為異步文件添加序列號
//這里，和vue-router配合如庭，實現(xiàn)切換路由時按需加載JS文件
chunkFilename: 'js/[id].build.js?[chunkhash]'
},
//注意：利用ExtractTextPlugin插件將css或者scss(require("style.css"))單獨打包到一個CSS文件
//這樣叹卷，樣式不會內(nèi)聯(lián)到JS里面
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: 'css-loader'
})
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(png|jpg|gif|svg|ico)$/,
loader: 'file-loader',
options: {
//圖片導出路徑
name: 'images/[name].[ext]'
}
}
]
},
resolve: {
//模塊別名定義，方便后續(xù)直接引用別名
//例如坪它，引用webconfig模塊骤竹，語法為: require('webconfig')
alias: {
'vue$': 'vue/dist/vue.esm.js',
appCss: srcPath + 'sass/app.scss',
favicon: srcPath + 'images/favicon.ico',
webconfig: configPath,
apiconfig: srcPath + 'config/apiconfig.js'
}
},
//webpack-dev-server配置
devServer: {
historyApiFallback: true,
noInfo: true,
//指定服務器文件路徑
contentBase: "./dist",
port: 9002
},
performance: {
//不展示警告或錯誤提示
hints: false
},
//選擇一種source map來增強調(diào)試過程，該選項會影響構(gòu)建和重構(gòu)建的速度
devtool: '#eval-source-map',
plugins: [
//定義全局插件往毡，不需要require()引入蒙揣，直接可以使用模塊名，如：webconfig.host;
new webpack.ProvidePlugin({
webconfig: 'webconfig',
API_CONFIG_URL: "apiconfig",
}),
// 依據(jù)一個簡單的模板开瞭，幫你生成最終的Html5文件
// 這個文件中自動引用了你打包后的JS文件懒震。
// 每次編譯都在文件名中插入一個不同的哈希值
new HtmlWebpackPlugin({
template: __dirname + "/index.tpl.html",
favicon: 'src/images/favicon.ico',
}),
//將CSS從JS文件中分離出來，并添加到輸出html文件中
new ExtractTextPlugin('css/' + '[name]-[hash].css'),
//每次build時嗤详，先清除dist包
new CleanWebpackPlugin(['dist'], {
verbose: true,
dry: false
})
]
};
//生成環(huán)境下的配置个扰，提供文件壓縮功能
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map';
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
6. 用到的插件plugins
1). cross-env
cross-env用來設置環(huán)境變量。
Node環(huán)境中的環(huán)境變量為NODE_ENV葱色，用process.env.NODE_ENV訪問該變量递宅。
可以看到package.json中的scripts用到這個功能：
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --env=integrate"
}
2). webpack-dev-server
webpack-dev-server提供了一個服務器和實時重載（live reloading）功能。
webpack-dev-server是一個小型的node.js Express服務器,它使用webpack-dev-middleware中間件來為通過webpack打包生成的資源文件提供Web服務。
3). html-webpack-plugin
該插件可以生成一個HTML5文件办龄，它可以動態(tài)添加script標簽加載webpack生成包烘绽。如果生成包帶hash值，那么土榴，就必須用這個插件了诀姚。
4). extract-text-webpack-plugin
將JavaScript中導入的CSS提取為單個CSS文件。
5). clean-webpack-plugin
刪除目標目錄下所有文件
更多高階內(nèi)容玷禽，可移步《小專欄-娜姐聊前端》赫段。
