詳解Webpack4多頁應用打包方案

更新時間：2020年07月16日 08:28:13 作者：Ray-daydayup

這篇文章主要介紹了詳解Webpack4多頁應用打包方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

學習了 webpack 之后，將自己的博客的前端進行重構，由于自己的博客是多頁應用，所以研究了下多頁應用的打包方案。在這里把最后配置的成果分享下，不足之處，請指正。（文字不多，全是代碼，不是配置教程，所以沒有特別詳細的寫，只是一個參考）

項目地址： https://github.com/Ray-daydayup/MPA-webpack

文件目錄結構

項目目錄結構

首先先看下我的項目的目錄結構

myblog-webpack
 ├── dist           // 打包輸出文件夾
 ├── src           // 源代碼
 │  ├── api         // 請求文件夾，存放封裝的請求方法
 │  ├── assets        // 靜態(tài)資源文件夾
 │  ├── lib         // 一些庫
 │  ├── pages        // 頁面
 │  │  ├── about      // 頁面名稱
 │  │  │  ├── index.html  // html模板
 │  │  │  └── index.js   // 入口js
 │  │  ├── category
 │  │  │  ├── index.html
 │  │  │  └── index.js
 │  │  ├── detail
 │  │  │  ├── index.html
 │  │  │  └── index.js
 │  │  ├── index
 │  │  │  ├── index.html
 │  │  │  └── index.js
 │  │  └── tag
 │  │    ├── index.html
 │  │    └── index.js
 │  ├── styles       // 樣式文件
 │  └── utils        // 工具函數(shù)
 ├── package.json
 ├── README.md
 ├── package-lock.json
 ├── webpack.base.js    // 公共配置
 ├── webpack.dev.js     // 開發(fā)環(huán)境配置
 └── webpack.prod.js    // 生產環(huán)境配置

打包輸出文件目錄結構

最終打包輸出的目錄如下

dist
 ├── assets
 ├── css
 │  ├── commons672a1e57.css
 │  └── index6085d612.css
 ├── js
 │  ├── aboutfc723f0e.js
 │  ├── categorye4be3bd6.js
 │  ├── commons78f1dd3f.js
 │  ├── detail0df434c5.js
 │  ├── indexe1e985d9.js
 │  ├── markdown-it
 │  │  ├── highlight.vendors.js
 │  │  ├── markdown-it-integrated.js
 │  │  ├── markdown-it-integrated.min.js
 │  │  ├── markdown-it-integrated.min.js.LICENSE.txt
 │  │  └── markdown-it.vendors.js
 │  └── tagf1c1035c.js
 ├── about.html
 ├── category.html
 ├── detail.html
 ├── favicon.ico
 ├── index.html
 └── tag.html

webpack 配置文件

注意：文中各部分所需的包名，并沒有書寫，請在附錄中查找?。?！相關配置的意義可以查找官方文檔

公共配置

動態(tài)獲取 entry 和設置 html-webpack-plugin

多頁應用的打包思路是每個頁面對應一個 entry ，一個 html-webpack-plugin ，但每次新增或刪除頁面需要改 webpack 配置，所以需要根據(jù)文件目錄動態(tài)獲取入口，來設置 html-webpack-plugin 。

利用一個庫 glob 來實現(xiàn)對文件目錄的讀取具體代碼如下，相關配置的意義可以查找官方文檔

const path = require('path')
const glob = require('glob')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const setMPA = () => {
 const entry = {}
 const htmlWebpackPlugins = []
 const entryFiles = glob.sync(path.join(__dirname, './src/pages/*/index.js')) // 匹配各頁面的對應入口文件
 entryFiles.forEach((item) => {
  const pageName = item.match(/pages\/(.*)\/index.js/)[1] // 獲取文件夾名，即頁面名稱
  entry[pageName] = item                  // 設置入口文件路徑
  // 設置html-webpack-plugin數(shù)組
  htmlWebpackPlugins.push(
   new HtmlWebpackPlugin({
    template: path.join(__dirname, `./src/pages/${pageName}/index.html`),//模板地址
    filename: `${pageName}.html`, //輸出文件名
    chunks: [pageName], // 插入的js chunk名稱，和output有關
    inject: true,    
    favicon: path.join(__dirname, './src/assets/favicon.ico'), // 圖標
    minify: { //壓縮代碼
     html5: true,
     collapseWhitespace: true,
     preserveLineBreaks: false,
     minifyCSS: true,
     minifyJS: true,
     removeComments: false
    }
   })
  )
 })
 return {
  entry,
  htmlWebpackPlugins
 }
}

const { entry, htmlWebpackPlugins } = setMPA()

使用 ES6 和 async、await ，以及 eslint

使用 ES6 和 async、await 以及 eslint ，需要借助 babel-loader 和 eslint-loader ，其具體配置很簡單

babel 相關的庫： @babel/core 、 @babel/preset-env 、 @babel/plugin-transform-regenerator 、 @babel/plugin-transform-runtime 、 eslint 相關的庫： babel-eslint 、 eslint

module.rules 的配置

{
  test: /\.js$/,
  use: ['babel-loader', 'eslint-loader']
}

.babelrc 文件的配置

{
 "presets": [
  "@babel/preset-env"
 ],
 "plugins": [ //設置支持async和await
  "@babel/plugin-transform-runtime",
  "@babel/plugin-transform-regenerator"
 ]
}

.eslintrc.js 的配置

module.exports = {
 parser: 'babel-eslint',
 extends: ['alloy'], // eslint標準請自行選擇下載
 env: {
  browser: true,
  node: true
 },
 rules: {
  'no-new': 'off',
  'no-proto': 'off'
  // 'no-console': 'error'
 }
}

加載圖片

利用 url-loader ，具體 module.rules 配置如下

{
  test: /\.(png|svg|jpg|gif)$/,
  use: [
   {
    loader: 'url-loader',
    options: {
     esModule: false,
     name: '[name][hash:8].[ext]', //文件指紋
     limit: 10240,         // 轉base64
     outputPath: './assets/images/' // 圖片文件輸出目錄和publicPath有關
    }
   }
  ]
 }

自動清理打包目錄利用 clean-webpack-plugin 插件，復制文件利用 copy-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

const basePlugins = [
 ...htmlWebpackPlugins, //之前配置的htmlWebpackPlugin數(shù)組
 new CleanWebpackPlugin(), // 自動清理構建目錄
 new CopyWebpackPlugin({
  patterns: [
   {
    from: path.join(__dirname, 'src/lib/markdown-it'), // 源
    to: path.join(__dirname, 'dist/js/markdown-it') // 目標位置
   }
  ]
 })
]

.browserslistrc 配置

# Browsers that we support

last 2 version
> 1%
iOS 7

開發(fā)環(huán)境配置

熱更新以及 devServer

具體配置如下：

plugins: [...basePlugins, new webpack.HotModuleReplacementPlugin()], //熱更新插件
devServer: {
  contentBase: 'dist', // 開啟服務的目錄
  hot: true, //熱更新開啟
  proxy: {
   '/api': {
    target: 'http://raydaydayup.cn:3000', //代理
    pathRewrite: { '^/api': '' }
   }
  }
}

CSS 相關配置

module.rules 的配置如下

{
  test: /\.less$/,
  use: ['style-loader', 'css-loader', 'less-loader']
},
{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}

出口

output: {
  filename: '[name].js',
  path: path.join(__dirname, 'dist')
}

生產環(huán)境配置

出口

output: {
  filename: 'js/[name][chunkhash:8].js', // 統(tǒng)一輸出到js文件夾
  path: path.join(__dirname, 'dist'),
  publicPath: '/' // 服務路徑
}

js 代碼壓縮

利用 terser-webpack-plugin 插件，配置 optimization

const TerserPlugin = require('terser-webpack-plugin')

optimization: {
  minimize: true,
  minimizer: [
   new TerserPlugin({
    include: [/\.js$/]
   })
  ]
}

CSS 相關配置

CSS 代碼壓縮，利用 optimize-css-assets-webpack-plugin 和 cssnano

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

plugins: [
 new OptimizeCSSAssetsPlugin({
   assetNameRegExp: /\.css$/g,
   cssProcessor: require('cssnano')
  })
]

CSS 分離單獨文件，利用 mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module: {
 rules: [
   ...baseModuleRules,
   {
    test: /\.less$/,
    use: [
     {
      loader: MiniCssExtractPlugin.loader,
      options: {
       esModule: true
      }
     },
     'css-loader',
     'less-loader'
    ]
   },
   {
    test: /\.css$/,
    use: [
     {
      loader: MiniCssExtractPlugin.loader,
      options: {
       esModule: true
      }
     },
     'css-loader'
    ]
   }
  ]
},
plugins: [
  ...basePlugins,
  new MiniCssExtractPlugin({
   filename: 'css/[name][contenthash:8].css' // 輸出文件名和地址
  }),
 ],

PostCSS 插件 autoprefixer 自動補齊 CSS3 前綴

module: {
  rules: [
   ...baseModuleRules,
   {
    test: /\.less$/,
    use: [
     {
      loader: MiniCssExtractPlugin.loader,
      options: {
       esModule: true
      }
     },
     'css-loader',
     {
      loader: 'postcss-loader',
      options: {
       plugins: () => [require('autoprefixer')]
      }
     },
     'less-loader'
    ]
   },
  ]
 },

分離公共文件（CSS和JS）

配置 optimization.splitChunks

optimization: {
  splitChunks: {
   cacheGroups: {
    commons: {
     name: 'commons',
     chunks: 'all',
     minChunks: 2 // 最少引用兩次
    }
   }
  }
 }

使用相關注意

html-webpack-plugin 模板使用以及 html-loader

導入 html 片段，在相應位置寫下面的代碼就像，需要注意的是， html-loader 加載的 html 片段內部 <%%> 語法會失效

<%= require("html-loader!@/components/recent.html") %>

html 中圖片的加載。在 html 中相關的 img 標簽的圖片， html-loader 加載時會自動調用 url-loader ，但是存在問題，加載出來的路徑?jīng)]有 "" 。為了避免這個問題，我就沒有再 html-loader 加載的 html 片段中使用圖片，而是直接再 html 模

板中直接用 require

<img src="<%= require('@/assets/logo362x82.png') %>" alt="" />

附錄

配置文件完整版

webpack.base.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const path = require('path')
const glob = require('glob')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

const setMPA = () => {
 const entry = {}
 const htmlWebpackPlugins = []
 const entryFiles = glob.sync(path.join(__dirname, './src/pages/*/index.js'))
 entryFiles.forEach((item) => {
  const pageName = item.match(/pages\/(.*)\/index.js/)[1]
  entry[pageName] = item
  htmlWebpackPlugins.push(
   new HtmlWebpackPlugin({
    template: path.join(__dirname, `./src/pages/${pageName}/index.html`),
    filename: `${pageName}.html`,
    chunks: [pageName],
    inject: true,
    favicon: path.join(__dirname, './src/assets/favicon.ico'),
    minify: {
     html5: true,
     collapseWhitespace: true,
     preserveLineBreaks: false,
     minifyCSS: true,
     minifyJS: true,
     removeComments: false
    }
   })
  )
 })
 return {
  entry,
  htmlWebpackPlugins
 }
}

const { entry, htmlWebpackPlugins } = setMPA()

const baseModuleRules = [
 {
  test: /\.js$/,
  use: ['babel-loader', 'eslint-loader']
 },
 {
  test: /\.(png|svg|jpg|gif)$/,
  use: [
   {
    loader: 'url-loader',
    options: {
     esModule: false,
     name: '[name][hash:8].[ext]',
     limit: 10240,
     outputPath: './assets/images/'
    }
   }
  ]
 }
]

const basePlugins = [
 ...htmlWebpackPlugins,
 new CleanWebpackPlugin(),
 new CopyWebpackPlugin({
  patterns: [
   {
    from: path.join(__dirname, 'src/lib/markdown-it'),
    to: path.join(__dirname, 'dist/js/markdown-it')
   }
  ]
 })
]
module.exports = {
 entry,
 baseModuleRules,
 basePlugins
}

webpack.dev.js

const webpack = require('webpack')
const path = require('path')
const { entry, baseModuleRules, basePlugins } = require('./webpack.base.js')

module.exports = {
 mode: 'development',
 entry,
 output: {
  filename: '[name].js',
  path: path.join(__dirname, 'dist')
 },
 module: {
  rules: [
   ...baseModuleRules,
   {
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader']
   },
   {
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
   }
  ]
 },
 resolve: {
  // 設置別名
  alias: {
   '@': path.join(__dirname, 'src') // 這樣配置后 @ 可以指向 src 目錄
  }
 },
 plugins: [...basePlugins, new webpack.HotModuleReplacementPlugin()],
 devServer: {
  contentBase: 'dist',
  hot: true,
  proxy: {
   '/api': {
    target: 'http://raydaydayup.cn:3000',
    pathRewrite: { '^/api': '' }
   }
  }
 }
}

webpack.prod.js

const { entry, baseModuleRules, basePlugins } = require('./webpack.base.js')
const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
 mode: 'production',
 entry,
 output: {
  filename: 'js/[name][chunkhash:8].js',
  path: path.join(__dirname, 'dist'),
  publicPath: '/'
 },
 resolve: {
  // 設置別名
  alias: {
   '@': path.resolve('src') // 這樣配置后 @ 可以指向 src 目錄
  }
 },
 module: {
  rules: [
   ...baseModuleRules,
   {
    test: /\.less$/,
    use: [
     {
      loader: MiniCssExtractPlugin.loader,
      options: {
       esModule: true
      }
     },
     'css-loader',
     {
      loader: 'postcss-loader',
      options: {
       plugins: () => [require('autoprefixer')]
      }
     },
     'less-loader'
    ]
   },
   {
    test: /\.css$/,
    use: [
     {
      loader: MiniCssExtractPlugin.loader,
      options: {
       esModule: true
      }
     },
     'css-loader'
    ]
   }
  ]
 },
 plugins: [
  ...basePlugins,
  new MiniCssExtractPlugin({
   filename: 'css/[name][contenthash:8].css'
  }),
  new OptimizeCSSAssetsPlugin({
   assetNameRegExp: /\.css$/g,
   cssProcessor: require('cssnano')
  })
 ],
 optimization: {
  minimize: true,
  minimizer: [
   new TerserPlugin({
    include: [/\.js$/]
   })
  ],
  splitChunks: {
   cacheGroups: {
    commons: {
     name: 'commons',
     chunks: 'all',
     minChunks: 2
    }
   }
  }
 }
}

package.json文件

{
 "name": "myblog-webpack",
 "version": "1.0.0",
 "description": "",
 "main": ".eslintrc.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --config webpack.prod.js",
  "dev": "webpack-dev-server --config webpack.dev.js --open"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "@babel/core": "^7.10.2",
  "@babel/plugin-transform-regenerator": "^7.10.3",
  "@babel/plugin-transform-runtime": "^7.10.3",
  "@babel/preset-env": "^7.10.2",
  "autoprefixer": "^9.8.4",
  "babel-eslint": "^10.1.0",
  "babel-loader": "^8.1.0",
  "clean-webpack-plugin": "^3.0.0",
  "copy-webpack-plugin": "^6.0.3",
  "css-loader": "^3.6.0",
  "cssnano": "^4.1.10",
  "eslint": "^7.2.0",
  "eslint-config-alloy": "^3.7.2",
  "eslint-loader": "^4.0.2",
  "file-loader": "^6.0.0",
  "glob": "^7.1.6",
  "html-loader": "^1.1.0",
  "html-webpack-plugin": "^4.3.0",
  "less-loader": "^6.1.2",
  "mini-css-extract-plugin": "^0.9.0",
  "optimize-css-assets-webpack-plugin": "^5.0.3",
  "postcss-loader": "^3.0.0",
  "style-loader": "^1.2.1",
  "terser-webpack-plugin": "^3.0.5",
  "url-loader": "^4.1.0",
  "webpack": "^4.43.0",
  "webpack-cli": "^3.3.11",
  "webpack-dev-server": "^3.11.0"
 },
 "dependencies": {
  "axios": "^0.19.2"
 }
}

到此這篇關于詳解Webpack4多頁應用打包方案的文章就介紹到這了,更多相關Webpack4多應用打包內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

判斷數(shù)組是否包含某個元素的js函數(shù)實現(xiàn)方法
下面小編就為大家?guī)硪黄袛鄶?shù)組是否包含某個元素的js函數(shù)實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
JS實現(xiàn)多選框的操作
這篇文章主要為大家詳細介紹了JS實現(xiàn)多選框的操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
ES6使用export和import實現(xiàn)模塊化的方法
這篇文章主要介紹了ES6使用export和import實現(xiàn)模塊化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
JavaScript前端優(yōu)化策略深入詳解
在前端開發(fā)中，優(yōu)化頁面性能是非常重要的一個方面，頁面性能優(yōu)化可以提升網(wǎng)站的用戶體驗，加速頁面的加載速度，提高用戶的滿意度，本文講解了前端通用的優(yōu)化策略，需要詳細了解可以參考下
2023-05-05
淺析JavaScript Array和string的轉換(推薦)
下面小編就為大家?guī)硪黄獪\析JavaScript Array和string的轉換(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
js定時器+簡單的動畫效果實例
下面小編就為大家?guī)硪黄猨s定時器+簡單的動畫效果實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
BootstrapTable與KnockoutJS相結合實現(xiàn)增刪改查功能【一】
KnockoutJS是一個JavaScript實現(xiàn)的MVVM框架。通過本文給大家介紹BootstrapTable與KnockoutJS相結合實現(xiàn)增刪改查功能【一】，感興趣的朋友一起學習吧
2016-05-05
微信小程序實現(xiàn)驗證碼倒計時效果
這篇文章主要介紹了微信小程序實現(xiàn)驗證碼倒計時效果，手機登錄、填手機號獲取驗證碼，倒計時后重新獲取效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-05-05
JS實現(xiàn)數(shù)組的增刪改查操作示例
這篇文章主要介紹了JS實現(xiàn)數(shù)組的增刪改查操作,結合實例形式分析了javascript針對數(shù)組的追加、獲取、刪除、添加、修改等常見操作技巧與相關注意事項,需要的朋友可以參考下
2018-08-08
擴展Bootstrap Tooltip插件使其可交互的方法
這篇文章主要介紹了擴展Bootstrap Tooltip插件使其可交互的方法,結合實例形式分析了bootstrap擴展tooltip插件的原理與具體操作技巧,需要的朋友可以參考下
2016-11-11