webpack&gulp集成简介
webpack简单介绍
webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.摘自github webpack页面。webpack以CommonJS规范在本地对js进行模块化处理打包，不再需要引入requirejs或seajs。可以通过不同的loader来对其他格式的文件进行处理。接下来会介绍下如何使用gulp和webpack来处理前端代码，并且会介绍一些集成过程中遇到的坑。文中最后把gulpfile.js和package.json里面的代码贴出来，仅供参考。
gulp和webpack集成使用介绍
安装完Nodejs环境后，把本文后面的package.json文件安装，gulp要全局安装（npm install gulp -g）。
- 创建webpack对象
var webpack = require("webpack")
- 创建gulp默认任务
//gulp --product
gulp.task('default', function() {
isProduct = argv.product;
isWatch = !isProduct;
console.log('正在处理：' + (isProduct ? '线上' : '本地') + '环境');
fse.emptydirSync('./dist');
gulp.start('webpack');
});
本地开发(命令：gulp)和线上(命令：gulp --product)部署gulp命令分开，本地会做文件更改的监听，并且不会压缩。
ps:fse库是对自带的fs库做了很好的扩展，推荐使用。
- webpack任务配置
最全配置代码参考gulpfile.js。
入口文件配置：
entry: {
index: './index.js'
common: [
'jquery',
'understore',
'template',
'store'
]
}
该参数主要是配置入口文件，打包出来的文件就是以里面的key作为名字的文件（即bundle）。
==注意点:[]和字符串的区别，如果是字符串(比如：'./index,js'),那么该文件（index.js）是不能在其他模块进行require的，如果既要作为入口文件又要在其他模块require，那么需要用数组的方式配置，即['./index.js']。可以看下打包后的代码，字符串的配置该文件代码会在索引为0的地方，如果配置成数组，则位置为0的函数中是没有自己代码的，只是来执行其他模块的代码==
输出路径配置：
output: {
path: './dist/',
filename: '[name].js',
publicPath: ''
}
文件会被输出到dist目录下，文件名是以当前文件名做为输出后的文件名。
别名配置：
resolve: {
alias: {
jquery: path.resolve('../global/lib/jquery.js'),
template: path.resolve('../global/lib/template.js'),
understore: path.resolve('../global/lib/underscore.js'),
store: path.resolve('../global/lib/store.js')
}
}
配置完别名，就可以用别名来进行require了，不管是在webpack配置中，还是在js代码中。比如，在entry中的common模块就可以直接用understore，在打包时就会通过别名找到具体的路径。==别名的值最好是绝对路径，当时我们用相对路径如果只是同一个目录结构没有问题，但是多个目录结构的引用就会出现路径解析错误。绝对路径转换使用path.resolve该方法即可==
webpack插件：
一些特殊功能可以通过webpack插件进行完成。
1)webpack内部全局变量
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
template: 'template',
store: 'store',
_: 'understore'
})
配置完全局的变量，在js中就直接可以用，不需要再require。该全局不是挂载到window对象上，只对webpack打包出来的js有用。
2）模块唯一插件
new webpack.optimize.DedupePlugin()
该插件会把相同的模块合并，不推荐使用，最好自己做到模块唯一性，如果打出来两个相同的模块，说明你的代码潜藏出错风险
3）css抽离插件
new ExtractTextPlugin("[name].css")
该插件会把css抽离出来作为单独的css文件进行打包，如果不使用该插件，会把css打包到js中，然后以style标签的形式，把css作为内联样式使用。
4）公共文件插件
new webpack.optimize.CommonsChunkPlugin('common', 'common.js')
该插件会把公共的模块进行抽离到公共的js模块里面，防止js重复引用打包。
5）压缩插件
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
mangle: {
except: ['$', 'm', 'webpackJsonpCallback']
}
})
该插件会把js进行压缩，在线上环境进行使用。mangle该关键词不需要混淆，因为在我们实践过程中，压缩后的代码有很多地方报错，故上面3个不混淆的值是根据我们自身项目来的。
sourcemap：
由于webpack会把所有的js都打包到一个js文件中，这样就不方便开发人员debug，故需要进行sourcemap的配置
devtool: (isProduct ? false : 'source-map')
线上环境不需要sourcemap，加上source-map参数，会在打包的时候打出来map文件，chrome浏览器会解析sourcemap进行定位到相应的文件。
加载器loader：
1）js加载器
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
compact: false
}
}
js使用babel来进行加载，这样就可以使用一些es6的特性来开发，IE8下面使用如下方案来进行解决转换后的代码不兼容问题。
==解决IE8 babel 转换：我们把shim.js & sham.js，自己合并到一起吧==
<!--[if IE 8]> <script src='es5-shim-sham.js)'></script><![endif]-->
2）css、less、sass加载器
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-convertValues')
}, {
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-convertValues!less-loader')
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-convertValues!sass-loader')
}
ExtractTextPlugin是抽离css的插件。css-loader是处理css，会把url(xxx.png)处理成require，然后通过对应后缀名的其他加载器进行处理。==如果是线上环境，css会进行压缩，很多配置要进行调整如果直接采用默认的，转换后的css会出现一些问题==
a)问题一，压缩后字体文件不能处理。解决方法：把iconfont.css里面的注释删除掉即可
b)问题二，压缩后的px单位会转换成pc,pt。解决方法：在加载器里面加上-convertValues参数。
c)问题三，css require的优先级问题，按照常理是后require的css是后加载。但是在实践过程中，(1)通过import引入的js模块中引入的css是优先于require引入的js模块中引入的css；(2)js中require的css名称如果和js所在模块的文件夹名字相同即使部分相同的话，优先级也会提高。
关于css加载器的参数可以参考cssnano。css-loader是根据cssnano对css进行处理的。
3）图片字体文件加载器，file-loader
{
test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg)$/,
loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
}
对一些图片和字体资源进行加载，我们会把相关文件抽离出来进行名字加上hash值的前7位做了处理后的名字。
4）html加载器
{
test: /\.html/,
loader: "html-loader"
}
我们主要把模板文件建成一个Html，然后在Js引入，这样该html就会以字符串格式的值赋给一变量，然后我们用arttemplate进行页面渲染。
脚本文件
- gulp脚本 gulpfile.js
var gulp = require('gulp'),
argv = require('yargs').argv,
fs = require('fs'),
fse = require('fs-extra'),
path = require('path'),
util = require('util');
var webpack = require("webpack"),
ExtractTextPlugin = require("extract-text-webpack-plugin");
var isWatch = true;
var isProduct = false;
var project = 'iwjw-pc';
//gulp --product
gulp.task('default', function() {
isProduct = argv.product;
isWatch = !isProduct;
console.log('正在处理：' + (isProduct ? '线上' : '本地') + '环境');
fse.emptydirSync('./dist');
gulp.start('webpack');
});
//webpack静态处理
gulp.task('webpack', function(callback) {
var minfy = [];
isProduct && minfy.push(new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
mangle: {
except: ['$', 'm', 'webpackJsonpCallback']
}
}));
//webpack配置文件
var config = {
watch: isWatch,
entry: {
index: './index.js',
common: [
'jquery',
'understore',
'template',
'store'
]
},
debug: true,
devtool: (isProduct ? false : 'source-map'),
output: {
path: './dist/',
filename: '[name].js',
publicPath: ''
},
resolve: {
alias: {
jquery: path.resolve('../global/lib/jquery.js'),
template: path.resolve('../global/lib/template.js'),
understore: path.resolve('../global/lib/underscore.js'),
store: path.resolve('../global/lib/store.js')
}
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
template: 'template',
store: 'store',
_: 'understore'
}),
new webpack.optimize.DedupePlugin(),
new ExtractTextPlugin("[name].css"),
new webpack.optimize.CommonsChunkPlugin('common', 'common.js')
].concat(minfy),
module: {
loaders: [{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
compact: false
}
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-convertValues')
}, {
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-convertValues!less-loader')
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-convertValues!sass-loader')
}, {
test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg)$/,
loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
}, {
test: /\.html/,
loader: "html-loader"
}]
}
};
webpack(config, function(err, stats) {
console.log(stats.toString());
});
});
gulp.task('sham', function(){
gulp.src('../global/lib/es5-shim-sham.js').pipe(gulp.dest('./dist'));
})
- pacakge.json
{
"name": "iwfe",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/server"
},
"dependencies": {
"babel-loader": "^5.3.2",
"bundle-loader": "^0.5.4",
"css-loader": "^0.16.0",
"exports-loader": "^0.6.2",
"extract-text-webpack-plugin": "^0.8.2",
"file-loader": "~0.8.4",
"fs-extra": "*",
"html-loader": "^0.4.0",
"imports-loader": "^0.6.5",
"jquery": "~2.1.4",
"sass-loader": "^3.1.2",
"source-map-loader": "^0.1.5",
"style-loader": "~0.12.3",
"through2": "*",
"url-loader": "~0.5.6",
"webpack": "*",
"webpack-dev-server": "^1.10.1",
"yargs": "*",
"gulp-zip": "*"
},
"devDependencies": {
"gulp": "*",
"gulp-util": "*"
},
"description": "前端静态库",
"repository": {
"type": "git",
"url": "xxx"
},
"author": "jade",
"license": "ISC"
}
参考文档：
