基于基于 webpack2 实现的多入口项目脚手架详解实现的多入口项目脚手架详解
简介简介
基于 webpack2 实现的多入口项目脚手架，主要使用 extract-text-webpack-plugin 实现 js 、css 公共代码提取，html-
webpack-plugin 实现 html 多入口，less-loader 实现 less 编译，postcss-loader 配置 autoprefixer 实现自动添加浏览器兼容前
缀，html-withimg-loader 实现 html 内引入图片版本号添加和模板功能，babel-loader 实现 ES6 转码功能， happypack 多线程
加速构建速度。
目录目录
├── dist # 构建后的目录
├── config # 项目配置文件
│ ├── webpack.config.js # webpack 配置文件
│ └── postcss.config.js # postcss 配置文件
├── src # 程序源文件
│ └── js # 入口
│ ├ └── index.js # 匹配 view/index.html
│ ├ └── user
│ ├ ├ ├── index.js # 匹配 view/user/index.html
│ ├ ├ ├── list.js # 匹配 view/user/list.html
│ ├ └── lib # JS 库等，不参与路由匹配
│ ├ ├── jquery.js
│ └── view
│ ├ └── index.html # 对应 js/index.js
│ ├ └── user
│ ├ ├── index.html # 对应 js/user/index.js
│ ├ ├── list.html # 对应 js/user/list.js
│ └── css # css 文件目录
│ ├ └── base.css
│ ├ └── iconfont.css
│ └── font # iconfont 文件目录
│ ├ └── iconfont.ttf
│ ├ └── iconfont.css
│ └── img # 图片文件目录
│ ├ └── pic1.jpg
│ ├ └── pic2.png
│ └── template # html 模板目录
│ └── head.html
│ └── foot.html
配置配置
多入口多入口
根据 JS 目录获取多入口数组
const ROOT = process.cwd(); // 根目录
let entryJs = getEntry('./src/js/**/*.js');
/**
* 根据目录获取入口
* @param {[type]} globPath [description] * @return {[type]} [description] */
function getEntry (globPath) {
let entries = {};
Glob.sync(globPath).forEach(function (entry) {
let basename = path.basename(entry, path.extname(entry)),
pathname = path.dirname(entry);
// js/lib/*.js 不作为入口
if (!entry.match(/\/js\/lib\//)) {
entries[pathname.split('/').splice(3).join('/') + '/' + basename] = pathname + '/' + basename;
}
});
return entries;
}
// webpack 配置
const config = {
entry: entryJs,
output: {
filename: 'js/[name].js?[chunkhash:8]',
资源评论
