webpack+express多頁站點開發
學習了webpack門級的教程後，以爲多是專門爲單頁應用而量身打造的，好比webpack+react、webpack+vue等，均可以解決各類資源的依賴加載、打包的問題。甚至css都是打包在js裏去動態添加到dom文檔中的。javascript
那若是咱們想要想要多頁的普通的web站點，css獨立出來，js加載須要模塊？css
項目地址：http://git.oschina.net/zycBlogs/webpackDemohtml
初始化項目、安裝依賴
package.jsonvue
"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和模板文件名對應。java
index.html 內容以下：node
<!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打包就能夠自動幫咱們引入。react
index.js內容以下：jquery
//引入css
require("../../css/lib/base.css");
require("../../css/page/index.scss");
$('body').append('<p class="text">index</p>');
page1.html:webpack
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>page1</title>
</head>
<body>
</body>
</html>
page1.js:git
//引入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' ]
要以根據我的電腦的配置相應的更改
相關文章
- 1. 基於 Webpack 開發和構建多頁面站點
- 2. 單頁面開發與多頁面開發的優缺點
- 3. 單頁面開發與多頁面開發的優缺點。
- 4. IIS開多個HTTPS站點
- 5. wordpress 多站點_WordPress多站點解密
- 6. WordPress 開啓多站點多域名
- 7. 單頁面開發與多頁面開發的區別和優缺點
- 8. 基於webpack的前端工程化開發之多頁站點篇（一）
- 9. 基於webpack的前端工程化開發之多頁站點篇（二）
- 10. PC站點開發規範
- 更多相關文章...
- • ASP.NET Web Pages - 發佈網站 - ASP.NET 教程
- • ASP.NET MVC - 發佈網站 - ASP.NET 教程
- • PHP開發工具
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
