WebPack在項(xiàng)目配置中的探索(持續(xù)更新中)

• webpack + gulp + vue (thinkPHP后臺(tái)配置)

一、項(xiàng)目需求(請(qǐng)認(rèn)真看目錄結(jié)構(gòu),項(xiàng)目構(gòu)建很大都基于目錄來(lái)的)

--- Application|--- Home| |--- View (線上用戶訪問(wèn)的.html目錄) --- Public (線上資源文件目錄)|--- js|--- images|--- css|--- ... --- source (前端開(kāi)發(fā)目錄)|--- index (一個(gè)業(yè)務(wù)需求模塊,每個(gè)業(yè)務(wù)需求模塊下會(huì)有很多頁(yè)面)| |--- index (index 頁(yè)面)| | |--- images | | |--- index.html | | |--- app.vue| | |--- index.js| | |--- style.scss| | |--- ...| |--- topics (topics 頁(yè)面)| | |--- images| | |--- topics.html| | | ...|--- crowd (另外一個(gè)業(yè)務(wù)需求模塊,每個(gè)業(yè)務(wù)需求模塊下會(huì)有很多頁(yè)面) | |--- index | | |--- index.html

以上是我們的一個(gè)項(xiàng)目結(jié)構(gòu)

• 1.我所想要的是每一個(gè)業(yè)務(wù)需求模塊下(source/index)會(huì)有很多頁(yè)面

• 每一個(gè)頁(yè)面都是一個(gè)文件夾(source/index/index,source/index/topics)

• 2.項(xiàng)目無(wú)需后臺(tái)環(huán)境瀏覽器可以直接打開(kāi)訪問(wèn)

• 3.每個(gè)頁(yè)面資源如.sass文件,.js文件等就近維護(hù),用.vue + es6的形式進(jìn)行組件模塊化的開(kāi)發(fā)

• 4.開(kāi)發(fā)時(shí)擁有良好的sourseMap調(diào)試

• 5.當(dāng)我們不需要這個(gè)業(yè)務(wù)模塊,或者某個(gè)頁(yè)面的時(shí)候可以直接刪除整個(gè)文件夾即可

webpack會(huì)幫助我們會(huì)為每一個(gè)頁(yè)面生成他自己的css文件,js文件.

由于是多頁(yè)應(yīng)用,在這我的html都是手動(dòng)創(chuàng)建的(還沒(méi)找到什么好的解決辦法),所以我們直接在我們的index頁(yè)面里link和script他們

<link rel="stylesheet" href="../../../Public/css/index/index.css"><script src="../../../Public/js/index/index.js"></script>

當(dāng)我們需要上線的時(shí)候在用gulp把相對(duì)路徑給替換成線上路徑

二、webpack

module.exports = {entry: {}, //路口output: { }, //輸出出口module: {loaders: [ ]},babel: { //配置babel"presets": ["es2015"],"plugins": ["transform-runtime"]},plugins: [ ],//編譯的時(shí)候所執(zhí)行的插件數(shù)組vue: { },//vue的配置,需要單獨(dú)出來(lái)配置devtool : "source-map" //調(diào)試模式 };

這很簡(jiǎn)單就不過(guò)多介紹,由于我們是多頁(yè)應(yīng)用,我們需要編寫(xiě)一個(gè)函數(shù)獲取所有路口js,生成一個(gè)我們想要的路徑的對(duì)象.

三、entry

//需要用到glob模塊 var glob = require('glob');var getEntry = function () {var entry = {};//首先我們先讀取我們的開(kāi)發(fā)目錄glob.sync('./source/**/*.js').forEach(function (name) {var n = name.slice(name.lastIndexOf('source/') + 7, name.length - 3);n = n.slice(0, n.lastIndexOf('/'));//接著我對(duì)路徑字符串進(jìn)行了一些裁剪成想要的路徑entry[n] = name;});console.log(entry); /*** entry = { * 'crowd/index' : './source/crowd/index/index.js',* 'index/index' : './source/index/index/index.js'* }***///最后返回entry 給 webpack的entryreturn entry; };

四、output

output: { //輸出位置path: path.resolve(__dirname, './public/'), //配置輸出路徑filename: './js/[name].js' //文件輸出形式//關(guān)于filename 我們有個(gè)變量就是 [name] = entry的key 當(dāng)然還有別的變量比如[id],[hash]等,大家可以自行發(fā)揮//我們也能把filename寫(xiě)成 filename : [name]/[name].[name].js 也是可以的 },

五、loader

關(guān)于loader,其實(shí)有兩種寫(xiě)法

{test: /\.(png|jpg|gif)$/,loader: 'url?limit=10000&name=./images/[name].[ext]?[hash:10]',/*query: {limit: 10000,name: './images/[name].[ext]?[hash:8]'}*/ },//在這無(wú)論是直接loader 后面跟參數(shù)(像url跟參一樣),或者是后面跟著一個(gè)對(duì)象 query,都是可以的.

六、 plugins

• 這里我就只用到一個(gè)就是生成 獨(dú)立的css文件,style嵌套在頁(yè)面里的方式實(shí)在是丑得不行

七、 vue

這沒(méi)啥好說(shuō)的,vue更新之后需要單獨(dú)出來(lái)配置了

vue: { //vue的配置,需要單獨(dú)出來(lái)配置loaders: {js: 'babel'} }

八、 NODE_ENV

• 以上都是我們的開(kāi)發(fā)配置,在生產(chǎn)環(huán)境中,我們還需要添加一些東西

• 關(guān)于調(diào)試 在這里我也處理了非常久,如果開(kāi)發(fā)的時(shí)候直接把vue的配置都寫(xiě)好,那在 頁(yè)面是有問(wèn)題的.所以我們得另外寫(xiě)一套vue,專門(mén)在生產(chǎn)環(huán)境中使用

//由于我們的.vue文件模塊化開(kāi)發(fā),里面自然也有 css與sass,我們也需要配置最后導(dǎo)出css文件 var vueLoader = {js: 'babel',css: ExtractTextPlugin.extract("vue-style-loader", "css-loader"),sass: ExtractTextPlugin.extract("vue-style-loader", "css-loader", 'sass-loader') };if (process.env.NODE_ENV === 'production') { //判斷是否為生產(chǎn)環(huán)境module.exports.vue.loaders = vueLoader;//以下直接借鑒尤大大的了module.exports.plugins = (module.exports.plugins || []).concat([new webpack.DefinePlugin({'process.env': {NODE_ENV: '"production"'}}),new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}),new webpack.optimize.OccurenceOrderPlugin()]); } else { //不是生產(chǎn)環(huán)境則配置devtool 調(diào)試module.exports.devtool = 'source-map'; }

九、 gulp

• 僅僅只有webpack部分還是沒(méi)法滿足我們的初衷,所以我們需要gulp進(jìn)行輔助

webpack僅僅只會(huì)把我們js路口里的所有東西都處理了,但是我們的頁(yè)面都是我們自己手動(dòng)寫(xiě)的(還沒(méi)想到更好的解決方案)

所以我們需要借助gulp的力量,把我們的.html移入我們想要的目錄

但是這樣的目錄結(jié)構(gòu)輸出其實(shí)是有問(wèn)題的

--- source (前端開(kāi)發(fā)目錄)|--- index (一個(gè)業(yè)務(wù)需求模塊,每個(gè)業(yè)務(wù)需求模塊下會(huì)有很多頁(yè)面)| |--- index (index 頁(yè)面)| | |--- images | | |--- index.html | | |--- app.vue| | |--- index.js| | |--- style.scss| | |--- ...| |--- topics (topics 頁(yè)面)| | |--- images| | |--- topics.html| | | ...|--- crowd (另外一個(gè)業(yè)務(wù)需求模塊,每個(gè)業(yè)務(wù)需求模塊下會(huì)有很多頁(yè)面) | |--- index | | |--- index.html//我們可以知道gulp通過(guò)通配符 ./source/**/*.html 匹配到的文件 輸入輸出目錄結(jié)構(gòu)都是相同的//那我們就會(huì)得到以下錯(cuò)誤的輸出結(jié)構(gòu)--- Application (錯(cuò)誤結(jié)構(gòu))|--- Home| |--- View (線上用戶訪問(wèn)的.html目錄)| |--- index (一個(gè)業(yè)務(wù)需求模塊)| | |--- index (index 頁(yè)面,多余的目錄)| | | |--- index.html| | |--- topics (topics頁(yè)面,多余的目錄)| | | |--- topics.html| |--- crowd (crowd業(yè)務(wù)模塊)| | |--- index (crowd業(yè)務(wù)模塊 index頁(yè)面,多余的目錄)| | | |--- index.html//我們的業(yè)務(wù)模塊文件應(yīng)該包含所有的業(yè)務(wù)頁(yè)面,而無(wú)需一個(gè)頁(yè)面就是一個(gè)文件夾. //所以以下才是正確的目錄結(jié)構(gòu)--- Application (正確結(jié)構(gòu))|--- Home| |--- View (線上用戶訪問(wèn)的.html目錄)| | |--- index (一個(gè)業(yè)務(wù)需求模塊)| | | |--- index.html| | | |--- topics.html| | |--- crowd (另一個(gè)業(yè)務(wù)需求模塊)| | | |--- index.html

• 本人想了非常多種方式都沒(méi)辦法實(shí)現(xiàn),最后找到了唯一的辦法(非常的愚蠢的辦法,如果您有更好的辦法麻煩告訴我 T.T)

var map = require('map-stream'); var vfs = require('vinyl-fs');gulp.task('view', function () {var log = function(file, cb) { //定義輸出路徑var view = __dirname + '/Application/Home/View';//又是一段切割過(guò)程 獲取我們想要的結(jié)構(gòu)var target = file.path.split('/').splice(-3);var qqqq = target.splice(1, 1);//設(shè)置我們的文件輸出pathfile.path = view + '/' + target.join('/'); cb(null, file);};vfs.src('./source/**/*.html').pipe(rev()) //這里您可以做一些pipe的操作.pipe(map(log)).pipe(vfs.dest('./output')); //這里會(huì)多輸出一次gulp.start(['clean']); //我們需要執(zhí)行一次clean 清理了多余的那層目錄 });

• 這樣我們就能獲得我們想要的目錄! 并且還能經(jīng)過(guò)pipe對(duì)html文件的操作! 最大的難點(diǎn)也就在這里

以上基本是我們所有的配置了,關(guān)于熱加載,或者是browserSync等別的輔助開(kāi)發(fā)工具,大家可以在這基礎(chǔ)上自行拓展.

十、后話

年終,前端各種戰(zhàn)爭(zhēng)大家也都看見(jiàn)了.在這樣一個(gè)前端需求極速增長(zhǎng),百家爭(zhēng)鳴,百花齊放的黃金時(shí)代.大家應(yīng)該持續(xù)保持學(xué)習(xí)的熱情

關(guān)注時(shí)代發(fā)展,觀望技術(shù)發(fā)展,不盲目跟風(fēng),選擇最適合自己的,最符合現(xiàn)有項(xiàng)目的.

倘若一個(gè)工具沒(méi)法為你們的項(xiàng)目帶來(lái)更好的效率,給開(kāi)發(fā)帶來(lái)更有益的發(fā)展.那你最好保持觀望,別盲從.

本人沒(méi)有經(jīng)歷過(guò)grunt時(shí)代,但是自從學(xué)習(xí)前端自動(dòng)化構(gòu)建以來(lái)也是一路從 grunt -> gulp -> webpack 過(guò)渡的

在這期間完全可以了解他們之前的差異和不同,更多的應(yīng)該學(xué)習(xí)思想

你應(yīng)該多質(zhì)問(wèn)自己,為什么這個(gè)工具當(dāng)下會(huì)火呢?你應(yīng)該不應(yīng)該學(xué)習(xí)?

我十分不贊同那些拿來(lái)即用的同學(xué),說(shuō)什么不久之后就死了,學(xué)也沒(méi)什么用,浪費(fèi)時(shí)間,我抄一個(gè)不就好了嗎?

雖然我寫(xiě)得都很基礎(chǔ),但我還是希望您別看我的文章.

• 如果能給您帶來(lái)不錯(cuò)的學(xué)習(xí)體驗(yàn),麻煩請(qǐng)右上角star : ) hava a nice day

原文地址： http://www.meckodo.com/?p=525

全部代碼：https://github.com/MeCKodo/webpack

總結(jié)

以上是生活随笔為你收集整理的WebPack在多页应用项目中的探索的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。