webpack如何實現多頁面配置

這篇文章主要介紹了webpack如何實現多頁面配置，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

定目錄結構

首先我只需要開發環境（包含自動更新）和打包環境，初定的目錄結構是這樣的

app主要寫業務代碼，config里寫webpack配置和一些打包、開發的配置，經過一番計較，最后根據自己習慣，目錄結構如下：

app
 -libs # 第三方插件庫，可以是css也可以是js，eg：jq
 -static # 公共的靜態資源文件夾
 -temlates # 模板文件夾
  -*** # 模塊文件夾
  -css # 當前模塊獨有的css文件需要在index.js中import
  -html # 模板文件，計劃支持html，pug兩種模板語言
  -index.js # 當前模塊入口文件

配置webpack

按上面所說，建好文件后，在根目錄新建webpack.config.js

然后全局安裝webpack和webpack-dev-server

npm i webpack webpack-dev-server -g

然后局部安裝

npm i webpack webpack-dev-server --save-dev

這樣我們的項目就可以引入webpack了，并且可以使用webpack-dev-server的相關功能了，webpack.config.js內容非常的簡單，就是根據環境變量中指定的當前環境來加載不同的webpack配置即可：

// 未指定這手動指定為生產環境
process.env.NODE_ENV = process.env.NODE_ENV ? process.env.NODE_ENV : 'product';
// 獲取環境命令，并去除首尾空格
const env = process.env.NODE_ENV.replace( /(\s*$)|(^\s*)/ig, "" );
// 根據環境變量引用相關的配置文件
module.exports = require( `./config/webpack.config.${env}.js` )

在config文件夾下分別新建webpack.config.dev.js和webpack.config.product.js分別代表開發環境的配置和生成打包文件的配置，考慮到很多配置都會相同，再建一個webpack.config.base.js用來寫統一的配置。

webpack.config.dev.js和webpack.config.product.js的區別是一個runtime時的配置，一個文件生成的配置，簡而言之，就是開發環境的不同是配置webpack-dev-server,生產環境是壓縮，map等配置

webpack.config.base.js文件才是webpack配置的主菜，包括entry、output、modules、plugins等

獲得所有入口文件的文件夾

function getEntryDir() {
  let globPath = 'app/templates/**/*.' + config.tplLang
  // (\/|\\\\) 這種寫法是為了兼容 windows和 mac系統目錄路徑的不同寫法
  let pathDir = 'app(\/|\\\\)(.*?)(\/|\\\\)html'
  let files = glob.sync( globPath )
  let dirname, entries = []
  for ( let i = 0; i < files.length; i++ ) {
    dirname = path.dirname( files[ i ] )
    entries.push( dirname.replace( new RegExp( '^' + pathDir ), '$2' ) )
  }
  return entries;
}

注入entry和生成HTMLWebpackPlugin

getEntryDir()
  .forEach( ( page ) => {
    let moduleName = page.split( '/' )
    let moduleNameStr = moduleName[ moduleName.length - 1 ]
    const htmlPlugin = new HTMLWebpackPlugin( {
      filename: `${moduleNameStr}.html`,
      template: path.resolve( __dirname, `../app/${page}/html/index.${config.tplLang}` ),
      chunks: [ moduleNameStr, 'vendors' ],
    } );
    HTMLPlugins.push( htmlPlugin );
    Entries[ moduleNameStr ] = path.resolve( __dirname, `../app/${page}/index.js` );
  } )

關于HTMLWebpackPlugin的用法，可以參照html-webpack-plugin用法全解 以及 官方文檔 已經寫的非常詳盡了。

第三方庫入口自動獲取

function getVendors() {
  let globPath = `app/${config.libraryDir}/**/*.*`
  let files = glob.sync( globPath )
  let libsArr = []
  files.forEach( ( v, i ) => {
    libsArr.push( './' + v )
  } )
  return libsArr
}
Entries[ 'vendors' ] = getVendors() // 第三方類庫

其中多頁面入口和第三方庫配置，請看這篇webpack中文站文檔分離 應用程序(app) 和 第三方庫(vendor) 入口

output 配置

output: {
 filename: "static/js/[name].bundle.[hash].js",
 path: path.resolve( __dirname, config.devServerOutputPath )
}

webpack配置合并

主要用到一個webpack插件 webpack-merge，可把分開配置的config合并，分開生產環境和調試環境

感謝你能夠認真閱讀完這篇文章，希望小編分享的“webpack如何實現多頁面配置”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!