webpack初探

简介

webpack是模块合并工具，从诞生开始webpack瞄准的就是大型单页应用，大型单页应用一般包括几百个模块，Browserify需要手动来指定entrypoint，但是对于几百个模块，手动来指定entrypoint很繁琐，但是webpack可以自动指定entrypoint，方便模块管理。如果你想成为react方便的专家，使用webpack是必备技能。



左侧是项目中所用的静态文件，右边处理后的静态文件。

webpack和browserify的区别：

webpack可以自动指定entrypoint，不需要手动指定某个页面需要什么依赖，但是browserify不可以。

browserify所处理的静态文件不包含.png文件。

webpack两大特色

codesplitting，代码分割对应browserify中的entrypoint，他会自动完成，不需要手动处理。执行的时候他会根据页面，自动生成对应js文件，不需要手动管理这些依赖。

loader处理各种类型的静态文件，并且支持串联操作，他就可以看成gulp中的.pipe，比如说处理sass，在gulp中先将文件读入，然后.pipe翻译成css文件，然后.pipe输出。在webpack中，先读入，然后通过一个loader将他翻译成css，然后再通过一个loader将他压缩，最后通过一个loader把他写入文件。

实战

npm install webpack -g
npm install jsx-loader --save

在webpack.config.js配置文件中写：

module.exports={
entry:'./app.jsx',
output:{
path:'./',//当前目录
filename:'app.js',//输出的文件名
},
module:{
loaders:[{
test:/\.jsx$/,//test就是个名字，其他名字也可以，后边是个正则表达式，表示以jsx结尾的文件
loader:'jsx-loader',//一旦找到以jsx结尾的文件，就会用loader进行处理，这里是将jsx文件转化为js文件
}]
}
}

当执行webpack命令就会自动读取module.exports中的内容。

entry入口点

output输出路径

以下代码可以解决重复问题

var webpack = require('webpack')
module.exports = {
entry:{
app:'./app.jsx',
app2:'./app2.jsx'
},
output:{
path :'./',
filename:'[name].js',
},
plugins:[
new webpack.optimize.CommonsChunkPlugin("common.js")//插件是自带的，将共同的代码抽取到common.js中，记的在页面中将common.js的引用哦！
],
module:{
loaders:[
{
test:/\.jsx$/,
loader:'jsx-loader',
}
]
}
}