摘要：博主最近在学习，顺便搭建了一个基于的前端项目架构在此写文记录一下，同时教会新入坑的小伙伴们如何在项目中玩弄，额玩转。所以开发环境中会有一个目录用于我们开发还有一个用来存储处理后的的模板文件。
博主最近在学习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(项目开发视图生成目录)
-build(项目开发打包目录)
-output(项目生产环境打包目录)
-app.js
-config.js
-util.js
-webpack.config.js
-webpack.deploy.js
以上项目目录中build文件夹为开发环境中的静态资源的生成目录，views为开发环境下模板生成目录，output则是生产环境中打包出来的静态资源及模板目录，webpack.config.js与webpack.deploy.js分别为webpack的开发config文件及发布config文件，util.js包含了一些关于file操作的公用方法,config.js则包含了包括cdn地址，文件入口与打包路径等信息
开发环境下webpack config开发模式的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开发的话模板是HtmlWebpackPlugin动态生成js css等静态资源引用的，无论开发还是部署环境请都配置上publicPath，同时配置打包路径不要使用../css/[name.css]这种相对路径，如果不配置上而且用这样链接，你会发现你的模板里的引用会变成这样自/build/../css/[name.css],额！感觉还是相当的坑（不知道是不是博主的使用方式有问题，知道的可以留言指正一下）。
模板处理
var HtmlWebpackPlugin = require("html-webpack-plugin"),
plugins=[],
//获取模板文件夹下所有的模板的文件路径
viewList=util.getView(configFile.VIEWENTER);
//循环遍历模板路径对象，生成HtmlWebpackPlugin实例
for(var index in viewList){
plugins.push(new HtmlWebpackPlugin({
title: "My App",
filename: "../views/"+index+".ejs",
template: viewList[index],
chunks: ["common",index]
}));
}
这一段代码就是通过HtmlWebpackPlugin来进行模板处理的，实际上很简单获取需要打包的的文件夹下的所有模板文件然后循环遍历生成HtmlWebpackPlugin的实例放入到plugins的列表当中，其中引入的模块限于公用模块及模板同名的模块，而HtmlWebpackPlugin所做的也相当简单只是单纯的将js文件插入到尾部，将css引用插入到头部，也可以自己指定位置，具体方法可以参考HtmlWebpackPlugin的文档，不过目前看来这样简单的配置也能够满足基本开发了。
在博主研究webpack的过程中发现很多的文章中并不会在开发环境下加入HtmlWebpackPlugin，但实际上HtmlWebpackPlugin的打包并不会去解析现有的js和css的link引用只会简单的追加引用，比如下面的模板：
Document
404