之前也寫過webpack學(xué)習(xí)記錄，項(xiàng)目中需要一個(gè)常用的webpack多頁(yè)面配置，所以才動(dòng)手，本著能寫一行是一行的原則，開始了配置webpack之旅。
定目錄結(jié)構(gòu)
首先我只需要開發(fā)環(huán)境（包含自動(dòng)更新）和打包環(huán)境，初定的目錄結(jié)構(gòu)是這樣的
app主要寫業(yè)務(wù)代碼，config里寫webpack配置和一些打包、開發(fā)的配置，經(jīng)過一番計(jì)較，最后根據(jù)自己習(xí)慣，目錄結(jié)構(gòu)如下：
app -libs # 第三方插件庫(kù)，可以是css也可以是js，eg：jq -static # 公共的靜態(tài)資源文件夾 -temlates # 模板文件夾 -*** # 模塊文件夾 -css # 當(dāng)前模塊獨(dú)有的css文件需要在index.js中import -html # 模板文件，計(jì)劃支持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
這樣我們的項(xiàng)目就可以引入webpack了，并且可以使用webpack-dev-server的相關(guān)功能了，webpack.config.js內(nèi)容非常的簡(jiǎn)單，就是根據(jù)環(huán)境變量中指定的當(dāng)前環(huán)境來加載不同的webpack配置即可：
// 未指定這手動(dòng)指定為生產(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)境的配置和生成打包文件的配置，考慮到很多配置都會(huì)相同，再建一個(gè)webpack.config.base.js用來寫統(tǒng)一的配置。
webpack.config.dev.js和webpack.config.product.js的區(qū)別是一個(gè)runtime時(shí)的配置，一個(gè)文件生成的配置，簡(jiǎn)而言之，就是開發(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)寫的非常詳盡了。
第三方庫(kù)入口自動(dò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() // 第三方類庫(kù)其中多頁(yè)面入口和第三方庫(kù)配置，請(qǐng)看這篇webpack中文站文檔分離 應(yīng)用程序(app) 和 第三方庫(kù)(vendor) 入口
output 配置
output: { filename: "static/js/[name].bundle.[hash].js", path: path.resolve( __dirname, config.devServerOutputPath )}webpack配置合并
主要用到一個(gè)webpack插件 webpack-merge，可把分開配置的config合并，分開生產(chǎn)環(huán)境和調(diào)試環(huán)境
最后奉上github地址: webpack-multi-skeleton ,有不對(duì)之處，請(qǐng)指正！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
