資訊專欄INFORMATION COLUMN
摘要：博主最近在學習，順便搭建了一個基于的前端項目架構在此寫文記錄一下，同時教會新入坑的小伙伴們如何在項目中玩弄，額玩轉。所以開發(fā)環(huán)境中會有一個目錄用于我們開發(fā)還有一個用來存儲處理后的的模板文件。
博主最近在學習react redux，順便搭建了一個基于webpack的前端項目架構,在此寫文記錄一下，同時教會新入webpack坑的小伙伴們如何在項目中玩弄，額！玩轉webpack。
github demo傳送門:redux-demo 如果覺得寫的還可以的話記得star (? ??_??)? 支持一下博主
整個項目的目錄的話是跟普通react redux項目相同的目錄結構，目錄結構如下:
-redux-demo
-bin
-routes
-src
-js
-action
-components
-constants
-page
-reducers
-less
-template
-views(項目開發(fā)視圖生成目錄)
-build(項目開發(fā)打包目錄)
-output(項目生產環(huán)境打包目錄)
-app.js
-config.js
-util.js
-webpack.config.js
-webpack.deploy.js
以上項目目錄中build文件夾為開發(fā)環(huán)境中的靜態(tài)資源的生成目錄，views為開發(fā)環(huán)境下模板生成目錄，output則是生產環(huán)境中打包出來的靜態(tài)資源及模板目錄，webpack.config.js與webpack.deploy.js分別為webpack的開發(fā)config文件及發(fā)布config文件，util.js包含了一些關于file操作的公用方法,config.js則包含了包括cdn地址，文件入口與打包路徑等信息
開發(fā)環(huán)境下webpack config開發(fā)模式的config主要內容如下:
var path = require("path"),
fs=require("fs"),
configFile=require("./config.js"),
util=require("./util.js"),
webpack = require("webpack"),
optimize = webpack.optimize,
plugins=[],staticPath=configFile.STATICPATH||"/static";
//額外插件
//用以生產多帶帶的css文件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractLESS = new ExtractTextPlugin("css/[name].css"),
HtmlWebpackPlugin = require("html-webpack-plugin"),
viewList=util.getView(configFile.VIEWENTER),htmlList=[];
plugins.push(new optimize.CommonsChunkPlugin("common","js/common.js"));
plugins.push(extractLESS);
for(var index in viewList){
plugins.push(new HtmlWebpackPlugin({
title: "My App",
filename: "../views/"+index+".ejs",
template: viewList[index],
chunks: ["common",index]
}));
}
module.exports = {
entry: util.getEntry(configFile.JSENTER),
output: {
path: path.join(__dirname, "/build"),
filename: "js/[name].js",
publicPath:staticPath
},
plugins:plugins,
module: {
loaders: [{
test: /.less$/,
loader: extractLESS.extract(["css","less"])
},{
test: /.js$/,
loader:"babel?sourceMap"
},{
test: /.(png|jpg)$/,
loader: "url-loader?limit=8192&name=/image/[name].[ext]"
}]
},
resolve: {
root: path.resolve("./src")
}
}
我們逐句分析一下這個config文件的內容及所做的事情
css的處理
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractLESS = new ExtractTextPlugin("css/[name].css"),
loader: extractLESS.extract(["css","less"])
對于css我不希望嵌入到html中所以引入了extract-text-webpack-plugin中間件它可以將插件中引入的css生成一個獨立位置ExtractTextPlugin傳參位置相對于webpack output中的path。這里對于路徑其實要注意一下的，因為webpack開發(fā)的話模板是HtmlWebpackPlugin動態(tài)生成js css等靜態(tài)資源引用的，無論開發(fā)還是部署環(huán)境請都配置上publicPath，同時配置打包路徑不要使用../css/[name.css]這種相對路徑，如果不配置上而且用這樣鏈接，你會發(fā)現你的模板里的引用會變成這樣自/build/../css/[name.css],額！感覺還是相當的坑（不知道是不是博主的使用方式有問題，知道的可以留言指正一下）。
模板處理
var HtmlWebpackPlugin = require("html-webpack-plugin"),
plugins=[],
//獲取模板文件夾下所有的模板的文件路徑
viewList=util.getView(configFile.VIEWENTER);
//循環(huán)遍歷模板路徑對象，生成HtmlWebpackPlugin實例
for(var index in viewList){
plugins.push(new HtmlWebpackPlugin({
title: "My App",
filename: "../views/"+index+".ejs",
template: viewList[index],
chunks: ["common",index]
}));
}
這一段代碼就是通過HtmlWebpackPlugin來進行模板處理的，實際上很簡單獲取需要打包的的文件夾下的所有模板文件然后循環(huán)遍歷生成HtmlWebpackPlugin的實例放入到plugins的列表當中，其中引入的模塊限于公用模塊及模板同名的模塊，而HtmlWebpackPlugin所做的也相當簡單只是單純的將js文件插入到尾部，將css引用插入到頭部，也可以自己指定位置，具體方法可以參考HtmlWebpackPlugin的文檔，不過目前看來這樣簡單的配置也能夠滿足基本開發(fā)了。
在博主研究webpack的過程中發(fā)現很多的文章中并不會在開發(fā)環(huán)境下加入HtmlWebpackPlugin，但實際上HtmlWebpackPlugin的打包并不會去解析現有的js和css的link引用只會簡單的追加引用，比如下面的模板：
Document
404