詳解webpack+express多頁站點開發(fā)
學(xué)習(xí)了webpack門級的教程后,覺得可能是專門為單頁應(yīng)用而量身打造的,比如webpack+react、webpack+vue等,都可以解決各種資源的依賴加載、打包的問題。甚至css都是打包在js里去動態(tài)添加到dom文檔中的。
那如果我們想要想要多頁的普通的web站點,css獨立出來,js加載需要模塊?
項目地址:webpackDemo_jb51.rar
初始化項目、安裝依賴
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" }
目錄結(jié)構(gòu)(我用的express框架,其他的根據(jù)個人需求)
- webpackDemo - src #代碼開發(fā)目錄 - css #css目錄,按照頁面(模塊)、通用、第三方三個級別進行組織 + page + common + lib - js #JS腳本,按照page、components進行組織 + page + components + template #HTML模板 - node_modules #所使用的nodejs模塊 - public #express靜態(tài)資源文件 - dist #webpack編譯打包輸出目錄,無需建立目錄可由webpack根據(jù)配置自動生成 + css + js + img #圖片資源 + view #express靜態(tài)資源文件(webpack編譯打包輸出view目錄) package.json #項目配置 webpack.config.js #webpack配置
開發(fā)頁面
在src/js/page目錄下建立index.js文件,在src/view目錄下建立index.html文件。入口js和模板文件名對應(yīng)。
index.html 內(nèi)容如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁</title> <!-- 描述:head中無需再引入css以及facicon,webpack將根據(jù)入口JS文件的要求自動實現(xiàn)按需加載或者生成style標(biāo)簽 --> </head> <body> <!-- 描述:body中同樣無需單獨引入JS文件,webpack會根據(jù)入口JS文件自動實現(xiàn)按需加載或者生成script標(biāo)簽,還可以生成對應(yīng)的hash值 --> </body> </html>
就是這樣一個簡單的HTML模板,不要引入任何CSS和JS,通過webpack打包就可以自動幫我們引入。
index.js內(nèi)容如下:
//引入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框架,其他的根據(jù)個人需求)
var path = require('path'); var webpack = require('webpack'); /* extract-text-webpack-plugin插件, 有了它就可以將你的樣式提取到單獨的css文件里, 媽媽再也不用擔(dān)心樣式會被打包到j(luò)s文件里了。 */ 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/', //模板、樣式、腳本、圖片等資源對應(yīng)的server上的路徑 filename: 'js/[name].js', //每個頁面對應(yīng)的主js的生成配置 chunkFilename: 'js/[id].chunk.js' //chunk生成的配置 }, module: { loaders: [ //加載器,關(guān)于各個加載器的參數(shù)配置,可自行搜索之。 { test: /\.css$/, //配置css的抽取器、加載器。'-loader'可以省去 loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, { test: /\.less$/, //配置less的抽取器、加載器。中間!有必要解釋一下, //根據(jù)從右到左的順序依次調(diào)用less、css加載器,前一個的輸出是后一個的輸入 //你也可以開發(fā)自己的loader喲。有關(guān)loader的寫法可自行谷歌之。 loader: ExtractTextPlugin.extract('css!less') }, { test: /\.scss$/, //配置scss的抽取器、加載器。中間!有必要解釋一下, //根據(jù)從右到左的順序依次調(diào)用scss、css加載器,前一個的輸出是后一個的輸入 //你也可以開發(fā)自己的loader喲。有關(guān)loader的寫法可自行谷歌之。 loader: ExtractTextPlugin.extract('css!scss') }, { //html模板加載器,可以處理引用的靜態(tài)資源,默認(rèn)配置參數(shù)attrs=img:src,處理圖片的src引用的資源 //比如你配置,attrs=img:src img:data-src就可以一并處理data-src引用的資源了,就像下面這樣 test: /\.html$/, loader: "html?attrs=img:src img:data-src" }, { //文件加載器,處理文件靜態(tài)資源 test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader?name=./fonts/[name].[ext]' }, { //圖片加載器,雷同file-loader,更適合圖片,可以將較小的圖片轉(zhuǎn)成base64,減少http請求 //如下配置,將小于8192byte的圖片轉(zhuǎn)成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標(biāo)簽加載css并設(shè)置路徑,相對于output配置中的publickPath //HtmlWebpackPlugin,模板生成相關(guān)的配置,每個對于一個頁面的配置,有幾個寫幾個 new HtmlWebpackPlugin({ //根據(jù)模板插入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, //為靜態(tài)資源生成hash值 chunks: ['commons', 'index'],//需要引入的chunk,不配置就會引入所有頁面的資源 minify: { //壓縮HTML文件 removeComments: true, //移除HTML中的注釋 collapseWhitespace: false //刪除空白符與換行符 } }), new HtmlWebpackPlugin({ //根據(jù)模板插入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, //為靜態(tài)資源生成hash值 chunks: ['commons', 'list'],//需要引入的chunk,不配置就會引入所有頁面的資源 minify: { //壓縮HTML文件 removeComments: true, //移除HTML中的注釋 collapseWhitespace: false //刪除空白符與換行符 } }) // new webpack.HotModuleReplacementPlugin() //熱加載 ], //使用webpack-dev-server,提高開發(fā)效率 // devServer: { // contentBase: './', // host: 'localhost', // port: 9090, //默認(rèn)8080 // inline: true, //可以監(jiān)控js變化 // hot: true, //熱啟動 // } };
好了,完成以上的這些配置之后,執(zhí)行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" rel="external nofollow" ><link href="/dist/css/commons.css?e6219853995506fd132a" rel="external nofollow" rel="stylesheet"><link href="/dist/css/index.css?e6219853995506fd132a" rel="external nofollow" 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>
可以看到生成的文件除了保留原模板中的內(nèi)容以外,還根據(jù)入口文件index.js的定義,自動添加需要引入CSS與JS文件,以及favicon,同時還添加了相應(yīng)的hash值。
兩個問題
- webpack如何自動發(fā)現(xiàn)entry文件及進行相應(yīng)的模板配置
- 如何直接處理樣式、腳本自動引入問題
var path = require('path'); var webpack = require('webpack'); var glob = require('glob'); /* extract-text-webpack-plugin插件, 有了它就可以將你的樣式提取到單獨的css文件里, 媽媽再也不用擔(dān)心樣式會被打包到j(luò)s文件里了。 */ 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; //判斷開發(fā)模式 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系統(tǒng)下這樣寫 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/', //模板、樣式、腳本、圖片等資源對應(yīng)的server上的路徑 filename: 'js/[name].js', //每個頁面對應(yīng)的主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標(biāo)簽加載css并設(shè)置路徑,相對于output配置中的publickPath debug ? function() {} : new UglifyJsPlugin({ //壓縮代碼 compress: { warnings: false }, except: ['$super', '$', 'exports', 'require'] //排除關(guān)鍵字 }), ] }; 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 /* * 壓縮這塊,調(diào)用了html-minify,會導(dǎo)致壓縮時候的很多html語法檢查問題, * 如在html標(biāo)簽屬性上使用{{...}}表達(dá)式,所以很多情況下并不需要在此配置壓縮項, * 另外,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;
下面的代碼和上面的差不多,本質(zhì)上的區(qū)別就是把通過一個方法把所有的相關(guān)的文件放到一個對象里這樣就完成了自動引入的效果了!
以上均為在mac osx 系統(tǒng)的配置,win7路徑可能會有不同
glob: 這邊解析出來的不一樣:
但要求最終
entries: { index: [ './src/template/index.js' ], page1: [ './src/template/page1.js' ] } pages: [ 'index', 'page1' ]
要以根據(jù)個人電腦的配置相應(yīng)的更改
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
利用Bootstrap實現(xiàn)表格復(fù)選框checkbox全選
Bootstrap相信應(yīng)該不用多介紹,來自 Twitter,是目前最受歡迎的前端框架。這篇文章主要給大家介紹了如何利用Bootstrap實現(xiàn)表格中的checkbox復(fù)選框全選效果,文中給出詳細(xì)的介紹及完整的實例代碼,相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值,下面來一起看看吧。2016-12-12被jQuery折騰得半死,揭秘為何jQuery為何在IE/Firefox下均無法使用
某學(xué)員前日實施一個Web項目實施發(fā)生了悲劇,找到我求解決,把我也折騰個半死。2010-01-01JavaScript Event學(xué)習(xí)第六章 事件的訪問
在這一章我會講解如何去訪問一個事件對象。2010-02-02