使用webpack打包ThinkPHP的資源文件
利用自己的空余時間一直在維護http://www.wx2share.com這個小網站，全是一個人在弄，由於只租得起虛擬空間，所以后台采用了簡單方便的ThinkPHP反正主要也是做一些CURD操作ThinkPHP還是挺好用的，幫我提前做好了好多功能。
本人並不擅長前端，但是開始開發這個小網站發現，基本的功能全部要通過前端javascript來實現。一開始的時候所有的javascript代碼全部寫在html頁面里。也沒有太大問題，后來為了頁面性能要求把所有javascript和css全部minify一下。我采用的辦法把js和css通過資源文件引入。然后用在線的minify工具復制過去minify以后，復制回來保存為xxx.min.js。方法是笨一點，但是一來頁面不多，到也沒有多麻煩。但是漸漸的頁面開始多了以后，就越來越不方便了。
原來方法中的痛點
- 每次minify都要復制來復制去，文件多了麻煩
- 代碼重復利用率不高。
- 辦法1：重復代碼全部復制到新文件（傻）
- 辦法2：公用代碼保存為單獨文件分別引入，不利入頁面性能
這時候讓我不得不考慮使用前端自動化構鍵工具
構鍵工具的選擇
我對工具的要求不高，一開始純粹主是我了minify js和css所以一開始我選用了gulp,因為用過所以直接就用了
gulp的方案
打包第三方的javascript類庫
gulp.task('vendor',()=>
gulp.src([
'bower_components/jquery/dist/jquery.js',
'bower_components/bootstrap/dist/js/bootstrap.js',
'src/lib/bootstrap-modal.js',
'src/lib/bootstrap-modalmanager.js',
'bower_components/jquery.cycle2/index.js'
]).pipe(concat('vendor.js'))
.pipe(gulpif(production,uglify({ mangle:true })))
.pipe(gulp.dest('Public/Home/js'))
);
不錯，完美。只要 NODE_ENV=production 時還能自動壓縮和混淆js
minify css並拷貝圖片Public對應目錄。
gulp.task('styles',()=>
gulp.src('src/css/show.css')
.pipe(plumber())
.pipe(autoprefixer())
.pipe(gulpif(production,cssmin()))
.pipe(gulp.dest('Public/Home/css'))
);
gulp.task('img',()=>
gulp.src('src/img/*')
.pipe(gulp.dest('Public/Home/img'))
);
gulp.task('watchcss',()=>
gulp.watch('src/css/**/*.css',['styles'])
);
也很不錯，通過gulp.watch還實現CSS實時更新。
打包自己的js文件
gulp.task('browserify', () =>{
var bundler = browserify({
//entries:['src/js/pcshowpage.js'],
entries:['src/js/pcshowpage/index.js'],
standalone:'pcshowpage',
cache:{},
packageCache:{},
plugin:[]
})
bundler.transform(babelify,{ presets: ["es2015"]});
bundler.bundle()
.pipe(source('pcshowpage.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(gulpif(production, streamify(uglify({ mangle: true }))))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('Public/Home/js'))}
);
相當以及完全的完美，通過babel的轉譯還能愉快的用ES6來寫代碼了，什么新特性都能用來了。代碼也能模塊化了。不同的功能寫成不同的模塊，只要import 一下就可以用了。gulp通過browserify幫你轉譯成瀏覽器能識別的ES5寫起代碼來非常愉快。
通過watchify也能實現代碼的實時更新
gulp.task('browserify-watch', () =>{
//var bundler = watchify(browserify('src/js/pcshowpage.js', watchify.args));
var bundler = browserify({
//entries:['src/js/pcshowpage.js'],
entries:['src/js/pcshowpage/index.js'],
standalone:'pcshowpage',
cache:{},
packageCache:{},
plugin:[watchify]
})
bundler.transform(babelify,{ presets: ["es2015"]});
bundler.on('update', rebundle);
return rebundle();
function rebundle() {
var start = Date.now();
bundler.bundle()
.on('error', function(err) {
gutil.log(gutil.colors.red(err.toString()));
})
.on('end', function() {
gutil.log(gutil.colors.green('Finished rebundling in', (Date.now() - start) + 'ms.'));
})
.pipe(source('pcshowpage.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('Public/Home/js'));
}
});
看起來非常的美好了，愉快的寫完了這個頁面開始重構別一個頁面的時候，問題來了，我不會用gulp定義多個出口文件，（就是我不會，沒用過而已，gulp肯定能做到的）我也知道用代碼來定義多個bundler肯定是做到，但是我滿腦子就想到了webpack定義多個出口文件是多么方便。所以我就對gulp始亂終棄了。
webpack的方案
entry: {
css:"./src/css/index.js",
mainpage:"./src/js/mainpage/index.js",
pcshowpage: "./src/js/pcshowpage/index.js",
combpage:"./src/js/combpage/index.js",
tbkpage:"./src/js/tbkpage/index.js",
},
output: {
library: '[name]',
libraryTarget: "umd",
path: path.resolve(__dirname, PublicPath),
filename: 'js/[name].js'
}
就這么簡單明了，每個js文件生成了單獨的輸出文件。不同的頁面引入不同的js就好了。接下來通過CommonsChunkPlugin抽取公用的模塊到common.js,
new webpack.optimize.CommonsChunkPlugin({
name: "common",
minChunks : 2,
chunks:["mainpage","pcshowpage","combpage","tbkpage"]
}),
這樣一些幾個頁面通用的代碼都被抽到common.js中了。其它圖片，CSS, Font等內容全部由不同的loader來處理，看起來比gulp明了多了。
開發與產生環境不同生成的配置。
開發環境
在目錄下，新建一個dev.js
require('shelljs/global')
var merge = require('webpack-merge')
var path = require('path')
var webpack = require('webpack')
var webpackConfig = require('./webpack.config')
var devcoifng=merge(webpackConfig, {
devtool: '#eval-source-map', //可以理解為繼承通用配置，在dev模式下生成source map 方便調試。
})
var c=webpack(devcoifng);
c.watch({ // watch options:
aggregateTimeout: 300, // wait so long for more changes
poll: true // use polling instead of native watchers
// pass a number to set the polling interval
}, function(err, stats) {
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n')
});
運行 node dev.js
通過wath()實現了，代碼的實時更新。修改完js代碼一保存，資源目錄下的文件就可以更新，刷新一下頁面就可以載入最新的代碼了。debug的時候由於有source map 就可以看清到底是哪里的代碼有問題，還支持單步調試。
生成環境
由於生成環境還需要配置的東西更多，所以我新建了一個prod.conf.js
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.config')
module.exports = merge(baseWebpackConfig, {
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: 'production'
}
}),
new webpack.optimize.UglifyJsPlugin({ //壓縮混淆代碼
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin(),
// extract css into its own file
]
})
再建一個build.js
require('shelljs/global')
env.NODE_ENV = 'production'
var path = require('path')
var webpack = require('webpack')
var webpackConfig = require('./webpack.prod.conf')
webpack(webpackConfig, function (err, stats) {
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n')
})
只要運行 node build.js
就可以生成已經壓縮混淆好的js和css了，可以說相當的方便了
還沒有解決的問題
- 竟然沒有辦法僅僅把代碼contact在一起的辦法，我的vendor文件還是用gulp生成的，還好這個文件基本上不怎么修改。我過通過定義
var dependencies = [
'./bower_components/jquery/dist/jquery.js',
'./bower_components/bootstrap/dist/js/bootstrap.js',
'./src/lib/bootstrap-modal.js',
'./src/lib/bootstrap-modalmanager.js',
'./bower_components/jquery.cycle2/index.js'
]
........
//然后在 entry 加入
entry:{
vendor:dependencies
........
.......
}
//再配置一個
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks : Infinity,
}),
.....
這樣生成的vendor文件里面所有的類庫全變成AMD JS 規范了再頁面中引入沒有辦法正常使用jquery等類庫，gulp contact的做法就是簡單把幾個文件合並在一起而已，在頁面中引入不影響使用，
- 還有一個問題是CDN引起的問題。
由於我的html模版頁面還是自己寫的，而且沒有用webpack處理，因為我用了thinkphp的模版功能，頁面的header footer 我定義在base.html中，其它頁面繼承一下，這樣，好多重復代碼就不用寫了。但是也沒有辦法用html-webpack-plugin來處理了，為了解決CDN緩存問題，我給每個資源文件加了一個時間戳，每次都要手動去改一下好麻煩
希望大家能提供好的方法來幫我解決這兩個問題。