网络编程 发布日期：2025/11/9 浏览次数：1
简介
基于 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"htmlcode">
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader"htmlcode">
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 https://github.com/kangax/html-minifier#options-quick-reference
minifyConfig = IsDev "htmlcode">
let configPlugins = [
new HappyPack({
id: 'js',
// @see https://github.com/amireh/happypack
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 https://github.com/webpack/webpack/tree/master/examples/multiple-entry-points-commons-chunk-css-bundle
new ExtractTextPlugin({
filename: 'css/[name].css"htmlcode">
// 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 生产环境构建，压缩代码
仓库：https://github.com/givebest/webpack2-multiple-entry
本地下载：http://xiazai.jb51.net/201706/yuanma/webpack2-multiple-entry(jb51.net).rar
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。