基於webpack的前端工程化開發之多頁站點篇（二）

時間 2019-11-06

標籤基於 webpack 前端工程化開發之多頁站點简体版

原文原文鏈接

這篇，咱們要解決上篇留下的兩個問題：javascript

webpack如何自動發現entry文件及進行相應的模板配置css
如何直接處理後端模板的樣式、腳本自動引入問題html

目錄結構

以express項目爲例，使用express-generator構建一個初始項目，而後再添加須要的目錄，最終的目錄架構以下：前端

- website
    - bin                    #express項目啓動文件
    - lib                    #express項目開發所需的庫
    + routes                #express項目路由
    - src                    #前端源碼開發目錄
        - styles            #css目錄，按照頁面（模塊）、通用、第三方三個級別進行組織
            + page
            + common
            + lib
        + imgs                #圖片資源
        - scripts            #JS腳本，按照page、components進行組織
            + page
            + components
        + views                #HTML模板
    - public                #webpack編譯打包輸出目錄的靜態文件，express工程的靜態目錄
        + styles                
        + scripts
        + imgs
    + views                    #webpack編譯輸出的模板靜態文件，express工程的視圖模板 
    + node_modules            #所使用的nodejs模塊
    package.json            #項目配置
    webpack.config.js        #webpack配置
    README.md                #項目說明

你一樣能夠根據我的喜愛自由設計目錄結構。完整的源碼示例前往https://github.com/vhtml/webpack-MultiplePage。java

安裝開發依賴

package.json裏最終的聲明依賴以下：node

"devDependencies": {
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "glob": "^7.0.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.9.0",
    "jquery": "^1.12.0",
    "less": "^2.6.0",
    "less-loader": "^2.2.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
}

能夠看出，比上篇多了一個glob依賴，它是一個根據模式匹配獲取文件列表的node模塊。有關glob的詳細用法能夠在這裏看到——https://github.com/isaacs/node-glob。利用glob模塊能夠很方便的獲取src/scripts/page路徑下的全部js入口文件。同理，能夠實現自動的進行與入口文件相對應的模板配置。jquery

webpack配置

最終的webpack配置以下（一些註釋可能會讓你少走許多坑）：webpack

var path = require('path');
var glob = require('glob');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

const debug = process.env.NODE_ENV !== 'production';

var entries = getEntry('src/scripts/page/**/*.js', 'src/scripts/page/');
var chunks = Object.keys(entries);
var config = {
    entry: entries,
    output: {
        path: path.join(__dirname, 'public'),
        publicPath: '/static/',
        filename: 'scripts/[name].js',
        chunkFilename: 'scripts/[id].chunk.js?[chunkhash]'
    },
    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: 'vendors', // 將公共模塊提取，生成名爲`vendors`的chunk
            chunks: chunks,
            minChunks: chunks.length // 提取全部entry共同依賴的模塊
        }),
        new ExtractTextPlugin('styles/[name].css'), //單獨使用link標籤加載css並設置路徑，相對於output配置中的publickPath
        debug ? function() {} : new UglifyJsPlugin({ //壓縮代碼
            compress: {
                warnings: false
            },
            except: ['$super', '$', 'exports', 'require'] //排除關鍵字
        }),
    ]
};


var pages = Object.keys(getEntry('src/views/**/*.html', 'src/views/'));
pages.forEach(function(pathname) {
    var conf = {
        filename: '../views/' + pathname + '.html', //生成的html存放路徑，相對於path
        template: 'src/views/' + 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) {
        conf.favicon = 'src/imgs/favicon.ico';
        conf.inject = 'body';
        conf.chunks = ['vendors', pathname];
        conf.hash = true;
    }
    config.plugins.push(new HtmlWebpackPlugin(conf));
});


module.exports = config;

function getEntry(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];
    }
    return entries;
}

建立開發腳本

創建一個開發環境服務器啓動腳本server.js:git

var fs = require('fs');
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

var serverPort = 54999,
    devPort = 8082;

var exec = require('child_process').exec;
var cmdStr = 'PORT=' + serverPort + ' supervisor ./bin/www';
exec(cmdStr);


for (var i in config.entry) {
    config.entry[i].unshift('webpack-dev-server/client?http://localhost:' + devPort, "webpack/hot/dev-server")
}
config.plugins.push(new webpack.HotModuleReplacementPlugin());


var proxy = {
    "*": "http://localhost:" + serverPort
};
//啓動服務
var app = new WebpackDevServer(webpack(config), {
    publicPath: '/static/',
    hot: true,
    proxy: proxy
});
app.listen(devPort, function() {
    console.log('dev server on http://0.0.0.0:' + devPort+'\n');
});

而後，只須要在項目目錄下執行node server就能夠開始進行開發了。github

有些同窗會發現一個問題，熱加載常常沒法生效，這個是因爲熱加載只能針對有module.exports輸出的模塊才行，不然會致使熱加載失敗從而刷新瀏覽器，而對於入口js文件因爲沒有模塊輸出，就會發現老是刷新瀏覽器了。若是要禁止自動刷新瀏覽器，能夠將server.js中的"webpack/hot/dev-server"改成"webpack/hot/only-dev-server"。

還有一個蛋疼的問題就是，webpack-dev-server監控文件變化生成的內容是放在內存裏的，因爲沒有輸出到打包目錄下，則/views目錄下的文件沒有變化，supervisor之類的工具檢測不到變化，從而不會刷新視圖。只好在改動模板文件後，執行webpack命令打包一下。因而比較蛋疼的在server.js的最後加上了這段代碼：

fs.watch('./src/views/', function() {
    exec('webpack --progress --hide-modules', function(err, stdout, stderr) {
        if (err) {
            console.log(stderr);
        } else {
            console.log(stdout);
        }
    });
});

在檢測到有模板改動的時候會自動從新打包，而後只需手動刷新下瀏覽器便可。顯然這樣作是比較低效的。暫時只能建議開發中不要頻繁地改動保存模板。

探索之路

這裏還要說說如何直接處理後端模板的問題。一開始本菜也是對這個問題進行了苦苦的探索，以爲可能真的實現不了，一度要放棄，並打算採用先純靜態打包再改寫成後端模板的方式（由於貌似尚未這樣的loader能夠很智能的處理模板include的問題以及在非html模板中自動引入css和js）。可是這樣作真的很蛋疼啊有木有！明明是一件事爲何要拆成兩件事去作呢？！

若是你也進行過這樣一番探索，你可能接觸過像jade-loader、ejs-loader、ejs-compiled-loader等這樣的webpack loader。無奈它們通通都不是我要找的，它們只是編譯了模板而沒有保留模板原有的生態，也不能自動地引入css和js。我也曾試過本身寫loader將ejs模板先轉成html模板（只處理include標籤，其他原樣保留）再用html-loader去處理，但又破壞了模板的可複用性，失去了靈活性。

好吧，其實只是想原樣輸出src/views中的模板，而後像上篇中那樣自動引入css和js，僅此而已。沒想到差一點鑽了死衚衕，想得過於複雜了。

咱們應該先知道一個事實，html-webpack-plugin插件實現自動引入css和js的原理，是在模板中對應的成對head和body標籤中進行解析插入。若是沒有head和body標籤，它會分別在模板頭和尾生成這兩個標籤並插入link和script標籤來引入css和js。而至於你的模板裏寫了什麼，它是不會關心的。明白了這個原理，要完成「大業」就爲期不遠了。咱們應該先改一改寫模板的方式，模板結構必定要是類html的，不能是jade這種（還好我並不喜歡用jade）。以artTemplate模板爲例，以下：

<!DOCTYPE html>
<html>
<head>
    {{include './common/meta'}}
</head>
<body>
    {{include './common/header'}}
    <div class="g-bd">
        {{include './common/_content'}}
    </div>
    {{include './common/footer'}}
</body>
</html>

是的，沒錯，只要保留完整的head、body結構便可。而後根據上述的webpack配置，將與入口js對應的模板插入link和script標籤並輸出到./views目錄中，其他模板原樣輸出到./views目錄或相應的子目錄下便可。

到此，「大業」完成。

假如你有更好的解決方案，歡迎一塊兒分享。