摘要：在項(xiàng)目配置中的探索持續(xù)更新中后臺(tái)配置一項(xiàng)目需求請(qǐng)認(rèn)真看目錄結(jié)構(gòu)項(xiàng)目構(gòu)建很大都基于目錄來(lái)的線(xiàn)上用戶(hù)訪(fǎng)問(wèn)的目錄線(xiàn)上資源文件目錄前端開(kāi)發(fā)目錄一個(gè)業(yè)務(wù)需求模塊每個(gè)業(yè)務(wù)需求模塊下會(huì)有很多頁(yè)面

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

--- Application
    |--- Home
    |   |--- View (線(xiàn)上用戶(hù)訪(fǎng)問(wèn)的.html目錄)
--- Public (線(xiàn)上資源文件目錄)
    |--- 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)訪(fǎng)問(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他們

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

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

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

//需要用到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的entry
    return entry; 
};

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 也是可以的
},

關(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,都是可以的.

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

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

vue: { //vue的配置,需要多帶帶出來(lái)配置
    loaders: {
        js: "babel"
    }
}

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

關(guān)于調(diào)試 在這里我也處理了非常久,如果開(kāi)發(fā)的時(shí)候直接把vue的配置都寫(xiě)好,那在 頁(yè)面是有問(wèn)題的.所以我們得另外寫(xiě)一套vue,專(zhuān)門(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";
}

僅僅只有webpack部分還是沒(méi)法滿(mǎn)足我們的初衷,所以我們需要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 (線(xiàn)上用戶(hù)訪(fǎng)問(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 (線(xiàn)上用戶(hù)訪(fǎng)問(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è)置我們的文件輸出path
        file.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