摘要：創(chuàng)建打包路徑利用這個方法，我們可以獲得需要打包的文件路徑方法中獲取文件路徑的模塊也可使用模塊，根據(jù)獲得打包的文件路徑，我們可以使用來實現(xiàn)多頁面打包。

一開始接觸webpack是因為使用Vue的關(guān)系，因為Vue的腳手架就是使用webpack構(gòu)建的。剛開始的時候覺得webpack就是為了打包單頁面而生的，后來想想，這么好的打包方案，只在單頁面上使用是否太浪費資源了呢？如果能在傳統(tǒng)多頁面上使用webpack，開始效率是否會事半功倍呢？好在眾多優(yōu)秀的前端開發(fā)者已經(jīng)寫了許多demo和文章供人學(xué)習(xí)。我也寫了一個小項目，希望對大家學(xué)習(xí)webpack有幫助。

好吧其實上面說的都是廢話，接下來附上項目地址和干貨，配合食用更佳。

webpack-multi-page

SPA好復(fù)雜，我還是喜歡傳統(tǒng)的多頁應(yīng)用怎么破？又或是，我司項目需要后端渲染，頁面模板怎么出？

每個頁面相同的UI布局好難維護(hù)，UI稍微改一點就要到每個頁面去改，好麻煩還容易漏，怎么破？

能不能整合進(jìn)ESLint來檢查語法？

能不能整合postcss來加強(qiáng)瀏覽器兼容性？

我可以使用在webpack中使用jquery嗎？

我可以使用在webpack中使用typescript嗎？

當(dāng)我們使用webpack打包多頁面，我們希望src目錄對應(yīng)打包后dist目錄是如上圖這樣的，開發(fā)根據(jù)頁面模塊的思路搭建開發(fā)架構(gòu)，然后經(jīng)過webpack打包，生成傳統(tǒng)頁面的構(gòu)架。

/**
 * 創(chuàng)建打包路徑
 */
const createFiles = function() {
  const usePug = require("../config").usePug;
  const useTypeScript = require("../config").useTypeScript;
  const path = require("path");
  const glob = require("glob");
  const result = [];
  const type = usePug ? "pug" : "html";
  const scriptType = useTypeScript ? "ts" : "js";
  const files = glob.sync(path.join(__dirname, `../src/views/**/*.${type}`));
  for (file of files) {
    result.push({
      name: usePug ? file.match(/w{0,}(?=.pug)/)[0] : file.match(/w{0,}(?=.html)/)[0],
      templatePath: file,
      jsPath: file.replace(type, scriptType),
      stylePath: file.replace(type, "stylus")
    });
  }
  return result;
};

利用這個方法，我們可以獲得需要打包的文件路徑(方法中獲取文件路徑的模塊也可使用fs模塊)，根據(jù)獲得打包的文件路徑，我們可以使用html-webpack-plugin來實現(xiàn)多頁面打包。

由于每一個html-webpack-plugin的對象實例都只針對/生成一個頁面，因此，我們做多頁應(yīng)用的話，就要配置多個html-webpack-plugin的對象實例：

const plugins = function() {
  const files = createFiles();
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const path = require("path");
  const ExtractTextPlugin = require("extract-text-webpack-plugin");

  let htmlPlugins = [];
  let Entries = {};
  files.map(file => {
    htmlPlugins.push(
      new HtmlWebpackPlugin({
        filename: `${file.name}.html`,
        template: file.templatePath,
        chunks: [file.name]
      })
    );
    Entries[file.name] = file.jsPath;
  });

  return {
    plugins: [
      ...htmlPlugins,
      new ExtractTextPlugin({
        filename: getPath => {
          return getPath("css/[name].css");
        }
      })
    ],
    Entries
  };
};

由于我使用了ExtractTextPlugin，因此這些CSS代碼最終都會生成到所屬chunk的目錄里成為一個CSS文件。

每個頁面相同的UI布局好難維護(hù)，UI稍微改一點就要到每個頁面去改，好麻煩還容易漏，怎么破？

考慮到這個問題，項目引進(jìn)并使用了pug模版引擎。

現(xiàn)在，我們可以利用pug的特性，創(chuàng)建一個共用組件：

demo.pug

p 這是一個共用組件

然后，當(dāng)你需要使用這個公用組件時可以引入進(jìn)來：

include "demo.pug"

除此之外，你還可以使用一切pug特供的特性。

webpack中配置pug也很簡單，先安裝：

npm i --save-dev pug pug-html-loader

然后將所有.html后綴的改為.pug后綴，并且使用pug語法。

然后在規(guī)則中再增加一條配置

{
    test: /.pug$/,
    use: "pug-html-loader"
}

同時把plugins對象中的用到index.html的HtmlWebpackPlugin中的template，也要改成index.pug。

先放出配置代碼:

if (useEslint) {
  loaders.push({
    test: /.js$/,
    loader: "eslint-loader",
    enforce: "pre",
    include: [path.resolve(__dirname, "src")],
    options: {
      formatter: require("stylish")
    }
  });
}

通過webpack整合ESLint，我們可以保證編譯生成的代碼都是沒有語法錯誤且符合編碼規(guī)范的；但在開發(fā)過程中，等到編譯的時候才察覺到問題可能也是太慢了點兒。

因此我建議可以把ESLint整合進(jìn)編輯器或IDE里，像我本人在用vs code，就可以使用一個名為Eslint的插件，一寫了有問題的代碼，就馬上會標(biāo)識出來。

首先，閱讀webpacl項目的時候通常要先看package.json這個文件。因為當(dāng)你在命令行敲下一句命令

npm run dev

webpack就會找到package.json文件中的script屬性并依次分析命令,可見,這句命令相應(yīng)的會執(zhí)行

nodemon --watch build/ --exec "cross-env NODE_ENV=development  webpack-dev-server --color --progress --config build/webpack.dev.js"

同樣的，當(dāng)寫下命令

npm run build

script就會執(zhí)行

ross-env NODE_ENV=production webpack --config build/webpack.prod.js

這樣就能區(qū)分開發(fā)環(huán)境，或是生產(chǎn)環(huán)境了。

雖然我們會為環(huán)境做區(qū)分,但是基于不重復(fù)原則,項目為兩個環(huán)境公用的配置整合到了(build/webpack.base.js)文件中。然后利用webpack-merge插件將配置整合在一起

在webpack中使用jquery也很簡單，我們可以在loaders中增加一條配置：

if (useJquery) {
  loaders.push({
    // 通過require("jquery")來引入
    test: require.resolve("jquery"),
    use: [
      {
        loader: "expose-loader",
        // 暴露出去的全局變量的名稱 隨便你自定義
        options: "jQuery"
      },
      {
        // 同上
        loader: "expose-loader",
        options: "$"
      }
    ]
  });
}

然后當(dāng)你需要在某個js文件使用jq時，引用暴露出來的變量名即可：

import $ from "jQuery";

在webpack中使用jquery也很簡單，我們可以在loaders中增加一條配置：

if (useTs) {
  loaders.push({
    test: /.tsx?$/,
    use: "ts-loader",
    exclude: /node_modules/
  });
}

然后將js文件改為ts即可。

歡迎大家提pr，一起構(gòu)建。