摘要：在項目配置中的探索持續更新中后臺配置一項目需求請認真看目錄結構項目構建很大都基于目錄來的線上用戶訪問的目錄線上資源文件目錄前端開發目錄一個業務需求模塊每個業務需求模塊下會有很多頁面

webpack + gulp + vue (thinkPHP后臺配置)

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

以上是我們的一個項目結構

1.我所想要的是每一個業務需求模塊下(source/index)會有很多頁面

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

2.項目無需后臺環境瀏覽器可以直接打開訪問

3.每個頁面資源如.sass文件,.js文件等就近維護,用.vue + es6的形式進行組件模塊化的開發

4.開發時擁有良好的sourseMap調試

5.當我們不需要這個業務模塊,或者某個頁面的時候可以直接刪除整個文件夾即可

webpack會幫助我們會為每一個頁面生成他自己的css文件,js文件.

由于是多頁應用,在這我的html都是手動創建的(還沒找到什么好的解決辦法),所以我們直接在我們的index頁面里link和script他們

當我們需要上線的時候在用gulp把相對路徑給替換成線上路徑

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

這很簡單就不過多介紹,由于我們是多頁應用,我們需要編寫一個函數獲取所有路口js,生成一個我們想要的路徑的對象.

//需要用到glob模塊
var glob = require("glob");

var getEntry = function () {
    var entry = {};
    //首先我們先讀取我們的開發目錄
    glob.sync("./source/**/*.js").forEach(function (name) {
        var n = name.slice(name.lastIndexOf("source/") + 7, name.length - 3);
        n = n.slice(0, n.lastIndexOf("/"));
        //接著我對路徑字符串進行了一些裁剪成想要的路徑
        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" //文件輸出形式
    //關于filename 我們有個變量就是 [name] = entry的key  當然還有別的變量比如[id],[hash]等,大家可以自行發揮
    //我們也能把filename寫成  filename : [name]/[name].[name].js 也是可以的
},

關于loader,其實有兩種寫法

{
    test: /.(png|jpg|gif)$/,
    loader: "url?limit=10000&name=./images/[name].[ext]?[hash:10]",
    /*query: {
        limit: 10000,
        name: "./images/[name].[ext]?[hash:8]"
    }*/
},

//在這無論是直接loader 后面跟參數(像url跟參一樣),或者是后面跟著一個對象 query,都是可以的.

這里我就只用到一個就是生成 獨立的css文件,style嵌套在頁面里的方式實在是丑得不行

這沒啥好說的,vue更新之后需要多帶帶出來配置了

vue: { //vue的配置,需要多帶帶出來配置
    loaders: {
        js: "babel"
    }
}

以上都是我們的開發配置,在生產環境中,我們還需要添加一些東西

關于調試 在這里我也處理了非常久,如果開發的時候直接把vue的配置都寫好,那在 頁面是有問題的.所以我們得另外寫一套vue,專門在生產環境中使用

//由于我們的.vue文件模塊化開發,里面自然也有 css與sass,我們也需要配置最后導出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") { //判斷是否為生產環境

    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 { //不是生產環境則配置devtool 調試
    module.exports.devtool = "source-map";
}

僅僅只有webpack部分還是沒法滿足我們的初衷,所以我們需要gulp進行輔助

webpack僅僅只會把我們js路口里的所有東西都處理了,但是我們的頁面都是我們自己手動寫的(還沒想到更好的解決方案)

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

但是這樣的目錄結構輸出其實是有問題的

--- source (前端開發目錄)
    |--- index (一個業務需求模塊,每個業務需求模塊下會有很多頁面)
    |    |--- index (index 頁面)
    |    |      |--- images    
    |    |    |--- index.html 
    |    |    |--- app.vue
    |    |    |--- index.js
    |    |    |--- style.scss
    |    |    |--- ...
    |    |--- topics (topics 頁面)
    |    |    |--- images
    |    |    |--- topics.html
    |      |      |    ...
    |--- crowd (另外一個業務需求模塊,每個業務需求模塊下會有很多頁面)          
    |    |--- index 
    |    |    |--- index.html

//我們可以知道gulp通過通配符 ./source/**/*.html 匹配到的文件 輸入輸出目錄結構都是相同的

//那我們就會得到以下錯誤的輸出結構

--- Application (錯誤結構)
    |--- Home
    |   |--- View (線上用戶訪問的.html目錄)
    |         |--- index (一個業務需求模塊)
    |          |      |--- index (index 頁面,多余的目錄)
    |         |     |     |--- index.html
    |         |     |--- topics (topics頁面,多余的目錄)
    |          |     |     |--- topics.html
    |         |--- crowd (crowd業務模塊)
    |         |     |--- index (crowd業務模塊 index頁面,多余的目錄)
    |         |     |     |--- index.html

//我們的業務模塊文件應該包含所有的業務頁面,而無需一個頁面就是一個文件夾.
//所以以下才是正確的目錄結構

--- Application (正確結構)
    |--- Home
    |   |--- View (線上用戶訪問的.html目錄)
    |    |    |--- index (一個業務需求模塊)
    |    |    |     |--- index.html
    |    |    |     |--- topics.html
    |    |    |--- crowd (另一個業務需求模塊)
    |    |    |     |--- index.html                     
                     

本人想了非常多種方式都沒辦法實現,最后找到了唯一的辦法(非常的愚蠢的辦法,如果您有更好的辦法麻煩告訴我 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";
        
        //又是一段切割過程 獲取我們想要的結構
        var target = file.path.split("/").splice(-3);
        var qqqq = target.splice(1, 1);
        
        //設置我們的文件輸出path
        file.path = view + "/" + target.join("/"); 
        cb(null, file);
    };
    vfs.src("./source/**/*.html")
        .pipe(rev()) //這里您可以做一些pipe的操作
        .pipe(map(log))
        .pipe(vfs.dest("./output")); //這里會多輸出一次

    gulp.start(["clean"]); //我們需要執行一次clean 清理了多余的那層目錄
});

這樣我們就能獲得我們想要的目錄! 并且還能經過pipe對html文件的操作! 最大的難點也就在這里

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

年終,前端各種戰爭大家也都看見了.在這樣一個前端需求極速增長,百家爭鳴,百花齊放的黃金時代.大家應該持續保持學習的熱情

關注時代發展,觀望技術發展,不盲目跟風,選擇最適合自己的,最符合現有項目的.

倘若一個工具沒法為你們的項目帶來更好的效率,給開發帶來更有益的發展.那你最好保持觀望,別盲從.

本人沒有經歷過grunt時代,但是自從學習前端自動化構建以來也是一路從 grunt -> gulp -> webpack 過渡的

在這期間完全可以了解他們之前的差異和不同,更多的應該學習思想

你應該多質問自己,為什么這個工具當下會火呢?你應該不應該學習?

我十分不贊同那些拿來即用的同學,說什么不久之后就死了,學也沒什么用,浪費時間,我抄一個不就好了嗎?

雖然我寫得都很基礎,但我還是希望您別看我的文章.

如果能給您帶來不錯的學習體驗,麻煩請右上角star : )  hava a nice day 

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

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