WebPack在項目配置中的探索(持續更新中)

• 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他們

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

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

二、webpack

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

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

三、entry

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

四、output

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

五、loader

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

六、 plugins

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

七、 vue

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

vue: { //vue的配置,需要單獨出來配置loaders: {js: 'babel'} }

八、 NODE_ENV

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

• 關于調試 在這里我也處理了非常久,如果開發的時候直接把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'; }

九、 gulp

• 僅僅只有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);//設置我們的文件輸出pathfile.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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。