前言

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

好吧其實(shí)上面說(shuō)的都是廢話，接下來(lái)附上項(xiàng)目地址和干貨，配合食用更佳。

webpack-multi-page

項(xiàng)目解決的問(wèn)題

• SPA好復(fù)雜，我還是喜歡傳統(tǒng)的多頁(yè)應(yīng)用怎么破？又或是，我司項(xiàng)目需要后端渲染，頁(yè)面模板怎么出？
• 每個(gè)頁(yè)面相同的UI布局好難維護(hù)，UI稍微改一點(diǎn)就要到每個(gè)頁(yè)面去改，好麻煩還容易漏，怎么破？
• 能不能整合進(jìn)ESLint來(lái)檢查語(yǔ)法？
• 能不能整合postcss來(lái)加強(qiáng)瀏覽器兼容性？
• 我可以使用在webpack中使用jquery嗎？
• 我可以使用在webpack中使用typescript嗎？

src目錄對(duì)應(yīng)dist目錄

當(dāng)我們使用webpack打包多頁(yè)面，我們希望src目錄對(duì)應(yīng)打包后dist目錄是如上圖這樣的，開(kāi)發(fā)根據(jù)頁(yè)面模塊的思路搭建開(kāi)發(fā)架構(gòu)，然后經(jīng)過(guò)webpack打包，生成傳統(tǒng)頁(yè)面的構(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;
};

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

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

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代碼最終都會(huì)生成到所屬chunk的目錄里成為一個(gè)CSS文件。

模版引擎

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

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

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

demo.pug

p 這是一個(gè)共用組件

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

include 'demo.pug'

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

webpack中配置pug也很簡(jiǎn)單，先安裝：

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

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

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

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

同時(shí)把plugins對(duì)象中的用到index.html的HtmlWebpackPlugin中的template，也要改成index.pug。

webpack整合eslint

先放出配置代碼:

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

通過(guò)webpack整合ESLint，我們可以保證編譯生成的代碼都是沒(méi)有語(yǔ)法錯(cuò)誤且符合編碼規(guī)范的；但在開(kāi)發(fā)過(guò)程中，等到編譯的時(shí)候才察覺(jué)到問(wèn)題可能也是太慢了點(diǎn)兒。

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

dev環(huán)境與prod環(huán)境

首先，閱讀webpacl項(xiàng)目的時(shí)候通常要先看package.json這個(gè)文件。因?yàn)楫?dāng)你在命令行敲下一句命令

npm run dev

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

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

npm run build

script就會(huì)執(zhí)行

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

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

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

webpack中使用jquery

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

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

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

import $ from 'jQuery';

webpack中使用typescript

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論