web前端发展很快，其开发所使用的开发工具也飞速发展中，上一年才刚接触grunt(原谅我接触的太晚，哭)，然后gulp就马上火了起来，而现在，webpack也开始火起来了，越来越多人重视其这个工具，我也从我平时开发过程中，好好说说webpack的体验把。
先贴一下webpack的配置文件把，下面就从webpack的每个配置项一步一步聊聊webpack是怎样工作的，这样做会有什么好处，或者又会有些什么坑。
{
resolve: {
alias: {
"jquery": path.resolve(
__dirname,
"assets/bower_components/jquery/dist/jquery"
),
"jquery_plugin": path.resolve(
__dirname,
'assets/javascripts/jquery_plugin'
)
}
},
entry: {
index: ['./assets/javascripts/index.js'],
edit: ['./assets/javascripts/edit.js']
},
output: {
path: './build/public',
publicPath: '/',
filename: '/javascripts/[name].js'
},
module: {
loaders: [
{
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', "css-loader!less-loader")
//loader: ( "style-loader!css-loader!less-loader")
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('', "css-loader")
},
{
test: /\.(png|jpe?g|eot|svg|ttf|woff2?)$/,
loader: "file?name=images/[name].[ext]"
},
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components|ace)/,
loader: 'babel',
query: {
optional: ['runtime']
}
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("commons", "javascripts/commons.js"),
new ExtractTextPlugin( "/stylesheets/[name].css" , {
allChunks: true
}),
new webpack.ProvidePlugin({
"jQuery": path.resolve(
__dirname,
"assets/bower_components/jquery/dist/jquery"
),
"$": path.resolve(
__dirname,
"assets/bower_components/jquery/dist/jquery"
)
}),
new webpack.optimize.UglifyJsPlugin({
mangle: {
except: ['$','jQuery']
},
compress: {
warnings: false
}
})
]
}
在介绍各个配置项之前，先介绍一下webpack是怎样对各个模块进行管理的。webpack可以使用cmd的范式，通过 require 引入各个模块:
var $ = require('./jQuery.js');
当然，除了引入js模块以外，我们还可以引入css文件或者less等预编译文件，至于问什么需要这样做，我后面会详细介绍一下的。
require('./index1.less');
require('./index2.css')
而各个模块的定义可以使用AMD或者CMD的设计规范来定义各个模块，因而，我们可以很轻松的像node.js那样使用 module.exports 来定义我们编写的模块
var obj = {};
module.exports = obj;
resolve
alias
{
resolve: {
alias: {
"jquery": path.resolve(
__dirname,
"assets/bower_components/jquery/dist/jquery"
),
"jquery_plugin": path.resolve(
__dirname,
'assets/javascripts/jquery_plugin'
)
}
}
}
webpack的alias的作用，通过key，value的形式，将模块名和路径对应起来，不管是相对路径还是绝对路径，因此，在模块引用的时候，利用require引用的模块可以不用通过相对路径或者绝对路径的方式，而是直接通过require('模块名')的方式进行引用。
entry
入口文件，通过key，value的方式，确定入口文件的文件名及其对应的文件路径。
什么是入口文件呢？在webpack中，所有的js文件都可以通过一个js文件进行引用，如下面的例子那样：
/**
* index.js
*/
require('moduleA');
require('../moduleB');
require('../index.less');
var $ = require('jquery');
/**
* webpack.config.js
*/
{
entry: {
indexA: ['./path/to/index.js']
}
}
webpack打包的时候，webpack会根据 webpack.config.js 中的entry字段，对index.js文件中所有通过require引入的js文件打包成indexA.js和common.js文件，至于common.js文件是怎样生成的，需要做些什么配置，后文会有所介绍。
output
path
path: './build/public',
webpack打包后，生成的js文件，css文件，字符文件，图片文件会打包放在path字段所指定的文件目录中。
publicPath
publicPath: '/buildPath/'
css文件中，我们通常都会引入图片或者字符文件，而webpack打包过程中，其引用的文件可通过file-loader(loader部分会介绍)进行打包，并对其文件名进行处理。
而在node引用中，我们可以搭建静态文件服务器，对某一文件夹（如express默认的public）中的静态资源进行管理，浏览器可以通过 /images/image-name.jpg直接访问。
而webpack打包的时候，遇到通过相对路径或者绝对路径进行引用的文件，其路径可通过publicPath中指定的路径重新合成。
如在css文件中有以下文件路径
div{
background-image: url(../images/picA.jpg);
}
而在webpack.config.js中，有以下配置
{
output: {
path: './build/public',
publicPath: '/buildPath/'
},
module: {
loaders: [
{
test: /\.(png|jpe?g|eot|svg|ttf|woff2?)$/,
loader: ExtractTextPlugin.extract('', "file-loader")
}
]
}
}
而webpack生成的css文件如下
div{
background-image: url(/buildPath/picA.jpg);
}
filename
entry: {
indexA: ['./assets/javascripts/index.js']
},
output: {
path: './build/public',
publicPath: '/',
filename: '/javascripts/[name].js'
}
确定webpack生成的js文件的准确路径和文件名，其文件路径根据之前的path和filename进行合成，文件为entry中的指定的index.js文件的模块名，如上面配置项所示，index.js文件生成的路径为 build/public/javascripts/indexA.js
module
loaders
module: {
loaders: [
{
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', "css-loader!less-loader")
//loader: ( "style-loader!css-loader!less-loader")
}
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('', "css-loader")
},
{
test: /\.(png|jpe?g|eot|svg|ttf|woff2?)$/,
loader: "file?name=images/[name].[ext]"
},
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components|ace)/,
loader: 'babel',
query: {
optional: ['runtime']
}
}
]
},
在webpack中，loader是webpack中最为重要的组成，loader可以对不同的文件使用不同的loader进行处理，且模块可以链式使用。
loader的作用是什么呢？我们在前端开发中，我们可能以不在直接使用css进行开发而使用Sass、Less这种预编译器进行处理，js我们可能使用coffee进行编写，甚至使用ES6进行开发，因此，我们需要对我们所编写的less文件，coffee文件或者使用了ES6语法的js文件进行编译或者转义，而loader的作用就是如此。
什么文件我们需要进行转义了，在loader字段中，我们可以在test字段中通过正则表达式选择我们需要转义的文件。
loader可以链式调用，对于less文件，我们可以通过less-loader对less文件转义成css文件，然后再使用css-loader对其生成的css文件在进行进一步的处理。
plugins
plugins是webpack中和loader同等地位的组成部分，他可以对我们生成的文件或者我们需要怎样生成文件进行跟细致化的处理。
new webpack.optimize.CommonsChunkPlugin("commons", "javascripts/commons.js")
该插件可以对entry中入口文件中的共同部分进行分离，达到在不同页面中可以共用同一套commons.js，利用缓存减少文件从服务器中获取。
new ExtractTextPlugin( "/stylesheets/[name].css" , {
allChunks: true
})
在output字段中，我们可以通过filename字段所定义的文件路径和文件名来确定我们所生成的js文件路径和文件名。
而对于css部分，我们可以通过上述插件对css部分进行类似于上面js部分的处理。
new webpack.ProvidePlugin({
"jQuery": path.resolve(
__dirname,
"assets/bower_components/jquery/dist/jquery"
),
"$": path.resolve(
__dirname,
"assets/bower_components/jquery/dist/jquery"
)
})
在webpack中，对于模块的引入，我们可以使用require的方式进行引入，也可以通过该插件全局引入好像jQuery和$这样的模块名，而不用在文件内部使用require进行引入。
