简介基于 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]',
chunkfilename: 'js/[name].js?[chunkhash:8]',
path: path.resolve(root, 'dist'),
publicpath: '/'
},
}
module使用 babel 实现 es2015 转 es5，less 转 css 并使用 postcss 实现 autoprefixer 自动添加浏览器兼容，url-loader 实现 css 引用图片、字体添加版本号，html-withimg-loader 实现 html 引用图片添加版本号并实现模板功能。
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader?id=js',
options: {
presets: ['env']
}
}
},
{
test: /\.(less|css)$/,
use: extracttextplugin.extract({
fallback: 'style-loader?id=styles',
use: [{
loader: 'css-loader?id=styles',
options: {
minimize: !isdev
}
},
{
loader: 'less-loader?id=styles'
},
{
loader: 'postcss-loader?id=styles',
options: {
config: {
path: postcssconfigpath
}
}
}
]
})
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 100,
publicpath: '',
name: '/img/[name].[ext]?[hash:8]'
}
}
]
},
{
test: /\.(eot|svg|ttf|woff)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 100,
publicpath: '',
name: '/font/[name].[ext]?[hash:8]'
}
}
]
},
// @see
{
test: /\.(htm|html)$/i,
loader: 'html-withimg-loader?min=false'
}
]
},
// postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({
browsers: ['> 1%', 'last 5 versions', 'not ie <= 9'],
})
]
}
view 视图根据目录对应关系，获取 js 对应的 html 入口
let entryhtml = getentryhtml('./src/view/**/*.html'),
configplugins;
entryhtml.foreach(function (v) {
configplugins.push(new htmlwebpackplugin(v));
});
// webpack 配置
resolve: {
alias: {
views: path.resolve(root, './src/view')
}
},
/**
* 根据目录获取 html 入口
* @param {[type]} globpath [description]
* @return {[type]} [description]
*/
function getentryhtml (globpath) {
let entries = [];
glob.sync(globpath).foreach(function (entry) {
let basename = path.basename(entry, path.extname(entry)),
pathname = path.dirname(entry),
// @see
minifyconfig = isdev ? '' : {
removecomments: true,
collapsewhitespace: true,
minifycss: true,
minifyjs: true
};
entries.push({
filename: entry.split('/').splice(2).join('/'),
template: entry,
chunks: ['common', pathname.split('/').splice(3).join('/') + '/' + basename],
minify: minifyconfig
});
});
return entries;
}
plugins使用 happypack 多线程加快构建速度，commonschunkplugin 实现提取公用 js 为单独文件，extract-text-webpack-plugin 实现提取公用 css 为单独文件，
let configplugins = [
new happypack({
id: 'js',
// @see
threadpool: happythreadpool,
loaders: ['babel-loader']
}),
new happypack({
id: 'styles',
threadpool: happythreadpool,
loaders: ['style-loader', 'css-loader', 'less-loader', 'postcss-loader']
}),
new webpack.optimize.commonschunkplugin({
name: 'common'
}),
// @see
new extracttextplugin({
filename: 'css/[name].css?[contenthash:8]',
allchunks: true
})
];
entryhtml.foreach(function (v) {
configplugins.push(new htmlwebpackplugin(v));
});
// webpack 配置
plugins: configplugins,
开发webpack-dev-server 实现开发环境自动刷新等功能
// webpack 配置
devserver: {
contentbase: [
path.join(root, 'src/')
],
hot: false,
host: '0.0.0.0',
port: 8080
}
开发npm start
http://localhost:8080/view
构建cross-env 实现区分开发和生产环境构建
命令说明
npm run dev 开发环境构建，不压缩代码
npm run build 生产环境构建，压缩代码
仓库欢迎 star
转载请注明出处：
以上就是webpack 实现的多入口项目脚手架的详细内容。