今天，开始来做webpack的模块加载，打包了，昨天就提过之前看到的一句话：gulp 是 task runner，Webpack 是 module bundler。
Tips：
前端自动化：
1.自动编译（将less，sass等自动编译）
2.自动合并（将页面引入的多个js文件，或者css文件，合并为同一个且压缩）
3.自动刷新（IDE保存，浏览器不用刷新，自动看到效果）
4.自动部署（自动将项目打包部署到指定目录）
5.自动同步（能够方便实现多个浏览器窗口，同步点击，输入，调试）
gulp：任务定义和组织；基于文件 stream 的构建；插件体系；
webpack：按照模块的依赖构建目标文件；loader 体系支持不同的模块；插件体系提供更多额外的功能；
安装
首先还是安装，在项目内用常规的npm形式安装
全局安装webpack
npm install webpack -g
配置package.json / 手动输入配置项后会在项目根目录创建package.json。
npm init
局部安装webpack
npm install webpack –save-dev
配置
项目内需要配置webpack.congig.js。这个js文件的作用与我们昨天的gulpfile.js相似，用来配置webpack。
那么我们就来简单配置一个：
const webpack = require("webpack");
// const plugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
// 源文件
entry : {
index : './src/index.js'
},
// 目标文件
output : {
filename: 'bundle/bundle.js'
},
module : {
// 加载器
loaders : [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.js$/, loader: 'jsx-loader' }
]
},
//其它解决方案配置
resolve: {
extensions: ['.html', '.js', '.jsx']
},
// 插件项
plugins : []
};
其中的加载器，我添加了，style-loader，css-loader，jsx-loader；所以还是需要通过npm安装他们。
然后直接运行webpack
我在indexjs里引入了appjs，这里可以清晰的看到，两个js都成功被创建。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
</body>
<script src="bundle/bundle.js" charset="utf-8"></script>
</html>
index.js
const app = require('./app.js');
app();
app.js
module.exports = function() {
console("this is a test");
};
bundle.js
界面上也很显示出了indexjs运行的结果：
然后我们也是涉及到了和gulp一样的问题，就是在码代码时自动刷新的问题了。
这里需要用webpack启一个本地的服务器，所以需要安装dev-server。
npm install –save-dev webpack-dev-server
然后需要在webpack.config.js中添加配置：
devServer: {
contentBase: "./",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
然后在package.json中添加
"scripts": {
"test": "test",
"start": "webpack",
"server": "webpack-dev-server"
},
配置，这时可以用npm run server指令启动服务，默认端口依旧是8080，当然也可以在配置里修改端口。
这里可以看到页面已经建立了websocket连接。
然后修改app.js里面的代码：
module.exports = function() {
console.log("this is a test");
console.log("this is another test");
};
页面里也自动刷新为：
另外，也可以在package.json中配置start，用npm start进行打包，以及添加各种插件，进行模块化处理。这只是练手，之后用上了，踩了哪些坑再来接着更新。
以上。