欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解webpack多頁面配置記錄

 更新時間：2018年01月22日 09:44:59   作者：CavinHuang  
本篇文章主要介紹了詳解webpack多頁面配置記錄，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

之前也寫過webpack學(xué)習(xí)記錄，項目中需要一個常用的webpack多頁面配置，所以才動手，本著能寫一行是一行的原則，開始了配置webpack之旅。

定目錄結(jié)構(gòu)

首先我只需要開發(fā)環(huán)境（包含自動更新）和打包環(huán)境，初定的目錄結(jié)構(gòu)是這樣的

app主要寫業(yè)務(wù)代碼，config里寫webpack配置和一些打包、開發(fā)的配置，經(jīng)過一番計較，最后根據(jù)自己習(xí)慣，目錄結(jié)構(gòu)如下：

 

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

配置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的相關(guān)功能了，webpack.config.js內(nèi)容非常的簡單，就是根據(jù)環(huán)境變量中指定的當(dāng)前環(huán)境來加載不同的webpack配置即可：

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

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

webpack.config.dev.js和webpack.config.product.js的區(qū)別是一個runtime時的配置，一個文件生成的配置，簡而言之，就是開發(fā)環(huán)境的不同是配置webpack-dev-server,生產(chǎn)環(huán)境是壓縮，map等配置

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

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

function getEntryDir() {
  let globPath = 'app/templates/**/*.' + config.tplLang
  // (\/|\\\\) 這種寫法是為了兼容 windows和 mac系統(tǒng)目錄路徑的不同寫法
  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` );
  } )

關(guān)于HTMLWebpackPlugin的用法，可以參照html-webpack-plugin用法全解 以及 官方文檔 已經(jīng)寫的非常詳盡了。

第三方庫入口自動獲取

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中文站文檔分離 應(yīng)用程序(app) 和 第三方庫(vendor) 入口

output 配置

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

webpack配置合并

主要用到一個webpack插件 webpack-merge，可把分開配置的config合并，分開生產(chǎn)環(huán)境和調(diào)試環(huán)境

最后奉上github地址: webpack-multi-skeleton ,有不對之處，請指正！

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

相關(guān)文章

最新評論