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',
 }
 ]
}
}