webpack+express多页站点开发
学习了webpack门级的教程后，觉得可能是专门为单页应用而量身打造的，比如webpack+react、webpack+vue等，都可以解决各种资源的依赖加载、打包的问题。甚至css都是打包在js里去动态添加到dom文档中的。
那如果我们想要想要多页的普通的web站点，css独立出来，js加载需要模块？
项目地址：http://git.oschina.net/zycBlogs/webpackDemo
初始化项目、安装依赖
package.json
"devDependencies": {
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.9.0",
"jquery": "^1.12.0",
"less": "^2.6.0",
"less-loader": "^2.2.2",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
}
目录结构（我用的express框架，其他的根据个人需求）
- webpackDemo
- src #代码开发目录
- css #css目录，按照页面（模块）、通用、第三方三个级别进行组织
+ page
+ common
+ lib
- js #JS脚本，按照page、components进行组织
+ page
+ components
+ template #HTML模板
- node_modules #所使用的nodejs模块
- public #express静态资源文件
- dist #webpack编译打包输出目录，无需建立目录可由webpack根据配置自动生成
+ css
+ js
+ img #图片资源
+ view #express静态资源文件（webpack编译打包输出view目录）
package.json #项目配置
webpack.config.js #webpack配置
开发页面
在src/js/page目录下建立index.js文件，在src/view目录下建立index.html文件。入口js和模板文件名对应。
index.html 内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<!--
描述：head中无需再引入css以及facicon，webpack将根据入口JS文件的要求自动实现按需加载或者生成style标签
-->
</head>
<body>
<!--
描述：body中同样无需单独引入JS文件，webpack会根据入口JS文件自动实现按需加载或者生成script标签，还可以生成对应的hash值
-->
</body>
</html>
就是这样一个简单的HTML模板，不要引入任何CSS和JS，通过webpack打包就可以自动帮我们引入。
index.js内容如下：
//引入css
require("../../css/lib/base.css");
require("../../css/page/index.scss");
$('body').append('<p class="text">index</p>');
page1.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>page1</title>
</head>
<body>
</body>
</html>
page1.js:
//引入css
require("../../css/lib/base.css");
require("../../css/page/page1.less");
$('body').html('page1');
webpack配置（我用的express框架，其他的根据个人需求）
var path = require('path');
var webpack = require('webpack');
/*
extract-text-webpack-plugin插件，
有了它就可以将你的样式提取到单独的css文件里，
妈妈再也不用担心样式会被打包到js文件里了。
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
html-webpack-plugin插件，重中之重，webpack中生成HTML的插件，
具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: { //配置入口文件，有几个写几个
index: './src/js/page/index.js',
page1: './src/js/page/page1.js'
},
output: {
path: path.join(__dirname, './public/dist/'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
publicPath: '/dist/', //模板、样式、脚本、图片等资源对应的server上的路径
filename: 'js/[name].js', //每个页面对应的主js的生成配置
chunkFilename: 'js/[id].chunk.js' //chunk生成的配置
},
module: {
loaders: [ //加载器，关于各个加载器的参数配置，可自行搜索之。
{
test: /\.css$/,
//配置css的抽取器、加载器。'-loader'可以省去
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}, {
test: /\.less$/,
//配置less的抽取器、加载器。中间!有必要解释一下，
//根据从右到左的顺序依次调用less、css加载器，前一个的输出是后一个的输入
//你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
loader: ExtractTextPlugin.extract('css!less')
}, {
test: /\.scss$/,
//配置scss的抽取器、加载器。中间!有必要解释一下，
//根据从右到左的顺序依次调用scss、css加载器，前一个的输出是后一个的输入
//你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
loader: ExtractTextPlugin.extract('css!scss')
}, {
//html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源
//比如你配置，attrs=img:src img:data-src就可以一并处理data-src引用的资源了，就像下面这样
test: /\.html$/,
loader: "html?attrs=img:src img:data-src"
}, {
//文件加载器，处理文件静态资源
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=./fonts/[name].[ext]'
}, {
//图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
//如下配置，将小于8192byte的图片转成base64码
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
}
]
},
plugins: [
new webpack.ProvidePlugin({ //加载jq
$: 'jquery'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'commons', // 将公共模块提取，生成名为`commons`的chunk
chunks: ['index','page1'], //提取哪些模块共有的部分
minChunks: 2 // 提取至少2个模块共有的部分
}),
new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath
//HtmlWebpackPlugin，模板生成相关的配置，每个对于一个页面的配置，有几个写几个
new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
favicon: './src/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
filename: '../../views/index.html', //生成的html存放路径，相对于path
template: './src/template/index.html', //html模板路径
inject: 'body', //js插入的位置，true/'head'/'body'/false
hash: true, //为静态资源生成hash值
chunks: ['commons', 'index'],//需要引入的chunk，不配置就会引入所有页面的资源
minify: { //压缩HTML文件
removeComments: true, //移除HTML中的注释
collapseWhitespace: false //删除空白符与换行符
}
}),
new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
favicon: './src/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
filename: '../../views/page1.html', //生成的html存放路径，相对于path
template: './src/template/page1.html', //html模板路径
inject: true, //js插入的位置，true/'head'/'body'/false
hash: true, //为静态资源生成hash值
chunks: ['commons', 'list'],//需要引入的chunk，不配置就会引入所有页面的资源
minify: { //压缩HTML文件
removeComments: true, //移除HTML中的注释
collapseWhitespace: false //删除空白符与换行符
}
})
// new webpack.HotModuleReplacementPlugin() //热加载
],
//使用webpack-dev-server，提高开发效率
// devServer: {
// contentBase: './',
// host: 'localhost',
// port: 9090, //默认8080
// inline: true, //可以监控js变化
// hot: true, //热启动
// }
};
好了，完成以上的这些配置之后，执行webpack打包命令完成项目打包。
Hash: e6219853995506fd132a
Version: webpack 1.14.0
Time: 1338ms
Asset Size Chunks Chunk Names
js/index.js 457 bytes 0 [emitted] index
js/page1.js 392 bytes 1 [emitted] page1
js/commons.js 306 kB 2 [emitted] commons
css/index.css 62 bytes 0 [emitted] index
css/page1.css 62 bytes 1 [emitted] page1
css/commons.css 803 bytes 2 [emitted] commons
favicon.ico 1.15 kB [emitted]
../../view/index.html 496 bytes [emitted]
../../view/page1.html 499 bytes [emitted]
[0] ./src/js/page/index.js 170 bytes {0} [built]
[0] ./src/js/page/page1.js 106 bytes {1} [built]
+ 7 hidden modules
Child html-webpack-plugin for "../../view/page1.html":
+ 1 hidden modules
Child html-webpack-plugin for "../../view/index.html":
+ 1 hidden modules
Child extract-text-webpack-plugin:
+ 2 hidden modules
Child extract-text-webpack-plugin:
+ 2 hidden modules
Child extract-text-webpack-plugin:
+ 2 hidden modules
此时，前往views目录下查看生成的index.html文件，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="shortcut icon" href="/dist/favicon.ico"><link href="/dist/css/commons.css?e6219853995506fd132a" rel="stylesheet"><link href="/dist/css/index.css?e6219853995506fd132a" rel="stylesheet"></head>
<body>
<script type="text/javascript" src="/dist/js/commons.js?e6219853995506fd132a"></script><script type="text/javascript" src="/dist/js/index.js?e6219853995506fd132a"></script></body>
</html>
可以看到生成的文件除了保留原模板中的内容以外，还根据入口文件index.js的定义，自动添加需要引入CSS与JS文件，以及favicon，同时还添加了相应的hash值。
两个问题
- webpack如何自动发现entry文件及进行相应的模板配置
- 如何直接处理样式、脚本自动引入问题
var path = require('path');
var webpack = require('webpack');
var glob = require('glob');
/*
extract-text-webpack-plugin插件，
有了它就可以将你的样式提取到单独的css文件里，
妈妈再也不用担心样式会被打包到js文件里了。
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
html-webpack-plugin插件，重中之重，webpack中生成HTML的插件，
具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
/**
*将公共模块提取，生成名为`commons`的chunk
*/
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
//压缩
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
//判断开发模式
var debug = process.env.NODE_ENV !== 'production';
var getEntry = function(globPath, pathDir) {
var files = glob.sync(globPath);
var entries = {},
entry, dirname, basename, pathname, extname;
for (var i = 0; i < files.length; i++) {
entry = files[i];
dirname = path.dirname(entry); //文件目录
extname = path.extname(entry); //后缀名
basename = path.basename(entry, extname); //文件名
pathname = path.join(dirname, basename);
pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname;
entries[pathname] = ['./' + entry]; //这是在osx系统下这样写 win7 entries[basename]
}
console.log(entries);
return entries;
}
//入口(通过getEntry方法得到所有的页面入口文件)
var entries = getEntry('src/js/page/**/*.js', 'src/js/page/');
//提取哪些模块共有的部分从entries里面获得文件名称
var chunks = Object.keys(entries);
//模板页面(通过getEntry方法得到所有的模板页面)
var pages = Object.keys(getEntry('src/template/**/*.html', 'src/template/'));
console.log(pages)
var config = {
entry: entries,
output: {
path: path.join(__dirname, './public/dist/'),//输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
publicPath: '/dist/', //模板、样式、脚本、图片等资源对应的server上的路径
filename: 'js/[name].js', //每个页面对应的主js的生成配置
chunkFilename: 'js/[id].chunk.js?[chunkhash]' //chunk生成的配置
},
module: {
loaders: [ //加载器
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css')
}, {
test: /\.less$/,
loader: ExtractTextPlugin.extract('css!less')
}, {
test: /\.html$/,
loader: "html?-minimize" //避免压缩html,https://github.com/webpack/html-loader/issues/50
}, {
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}, {
test: /\.(png|jpe?g|gif)$/,
loader: 'url-loader?limit=8192&name=imgs/[name]-[hash].[ext]'
}
]
},
plugins: [
new webpack.ProvidePlugin({ //加载jq
$: 'jquery'
}),
new CommonsChunkPlugin({
name: 'commons', // 将公共模块提取，生成名为`commons`的chunk
chunks: chunks,
minChunks: chunks.length // 提取所有entry共同依赖的模块
}),
new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath
debug ? function() {} : new UglifyJsPlugin({ //压缩代码
compress: {
warnings: false
},
except: ['$super', '$', 'exports', 'require'] //排除关键字
}),
]
};
pages.forEach(function(pathname) {
var conf = {
filename: '../../views/' + pathname + '.html', //生成的html存放路径，相对于path
template: 'src/template/' + pathname + '.html', //html模板路径
inject: false, //js插入的位置，true/'head'/'body'/false
/*
* 压缩这块，调用了html-minify，会导致压缩时候的很多html语法检查问题，
* 如在html标签属性上使用{{...}}表达式，所以很多情况下并不需要在此配置压缩项，
* 另外，UglifyJsPlugin会在压缩代码的时候连同html一起压缩。
* 为避免压缩html，需要在html-loader上配置'html?-minimize'，见loaders中html-loader的配置。
*/
// minify: { //压缩HTML文件
// removeComments: true, //移除HTML中的注释
// collapseWhitespace: false //删除空白符与换行符
// }
};
if (pathname in config.entry) {
favicon: './src/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
conf.inject = 'body';
conf.chunks = ['commons', pathname];
conf.hash = true;
}
config.plugins.push(new HtmlWebpackPlugin(conf));
});
module.exports = config;
下面的代码和上面的差不多，本质上的区别就是把通过一个方法把所有的相关的文件放到一个对象里这样就完成了自动引入的效果了！
以上均为在mac osx 系统的配置，win7路径可能会有不同
glob: 这边解析出来的不一样：
但要求最终
entries:
{
index: [ './src/template/index.js' ],
page1: [ './src/template/page1.js' ]
}
pages:
[ 'index', 'page1' ]
要以根据个人电脑的配置相应的更改
webpack+express多页站点开发的更多相关文章
- 基于webpack和vue.js搭建开发环境
前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. ...
- react+react-router+webpack+express+nodejs
react+react-router+webpack+express+nodejs 做SinglePageApplication 支持热加载+ES6 有开发模式和发布模式 https://gith ...
- 【初恋】vue单页应用开发总结
vue新人,没有高级技巧 本文主要总结了使用vue-cli脚手架安装开发环境,使用vue.js等进行单页应用开发所遇问题的总结. 技术栈: Vue v1.0.21, vue-resource v0.9 ...
- 真刀实战地搭建React+Webpack+Express搭建一个简易聊天室
一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...
- 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- 移动Web单页应用开发实践——实现Pull to Request（上/下拉请求操作）
在单页应用开发中,无论是页面结构化,还是Pull to Request,都离不开一个技术——页面局部滚动.当下的移动web技术,主要使用下面两种方式实现局部区域的滚动: 基于IScroll组件,也有很 ...
- 【转】移动Web单页应用开发实践——页面结构化
1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...
- 移动Web单页应用开发实践——页面结构化
1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...
- (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境
通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...
随机推荐
- 【好书分享】容器网络到kubernetes网络
Nginx 公司的 Michael Hausenblas 发布了一本关于 docker 和 kubernetes 中的容器网络的小册子.这份资料一共 72 页,是大家由浅入深的了解 Docker 和 ...
- PHP-note
func_get_arg - Return an item from the argument list func_get_args - Returns an array comprising a f ...
- tar 命令压缩时报错 tar: Removing leading `/' from member names
在使用tar命令进行压缩打包的时候我们常常会遇到下面的错误.虽然它不会影响我们最后的压缩打包,但是间接说明了我们的命令是有问题的.接下来我们来看看解决的方法. 报错内容: [root@haha ~]# ...
- 用java实现编译器-算术表达式及其语法解析器的实现
大家在参考本节时,请先阅读以下博文,进行预热: http://blog.csdn.net/tyler_download/article/details/50708807 本节代码下载地址: http: ...
- 任务四十一：UI组件之日历组件（二）
任务四十一:UI组件之日历组件(二) 面向人群: 有一定基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学 ...
- .net mvc Razor 三元运算判断赋值 ?:
预期效果: 当Model中的Age数字列值为0时,不显示该值. <input type="text" class="form-control onlyPositiv ...
- Web服务的调用
1.创建服务引用 例如:天气预报 2.在代码添加引用空间 TvProgram.ChinaTVprogramWebService tp = new TvProgram.ChinaTVprogramWeb ...
- C# byte 和 char 转化
C# byte 和 char 可以认为是等价的.但是在文本显示的时候有差异. c# 使用的是unicode字符集,应该和为ascii相互转换 只能转换到字符的unicode编码,或者由unico ...
- js 背景自动切换
//首页自动更换背景特效开始============================================ var curIndex = 0; //时间间隔(单位毫秒),每秒钟显示一张,数组 ...
- ORACLEserver实例DB的概念学习理解与总结【进阶一】
个人原创,转自请在文章开头显眼位置注明出处:https://www.cnblogs.com/sunshine5683/p/10048824.html 一.以后看一个oracleserver,可以使用如 ...