呼呼...终于考完试了，好久没有更新博客了，感觉这里荒草丛生了，虽然知道没什么人看我的文章但还是很想更啊...
虽说一直是在准备期末考试，但还是有一直在学前端的新技术哒，只是一直没什么时间写，接下来我会陆陆续续把我学到的有趣东西记录到这里来~
1 对webpack的认识（webpack能解决什么问题）
一直都是写html，然后写css和js，然后各种link和script一进来，也没觉得有什么不妥，所以刚接触webpack各种晕啊，但没办法，前端工程化是潮流嘛~
webpack能解决的问题：
*可以像写nodejs一样，在前端中对js文件各种exports和require，还有css，和图片也是被当作模块来加载的，是不是叼叼的...
*可以通过加载器对sass文件啊，coffeescript啊，jsx啊，ES6啊等自动执行转译...
*各种打包压缩...
2 webpack的语法（怎么用）
（1）webpack是npm包下的一个包，所以可以通过 npm install webpack -g 来全局安装，一般工具类的都是全局来安装的...
（2）配置文件webpack.config.js，这是我在一个简单的项目中的配置：
需要重点说一下就是entry是用来声明入口文件的，入口文件通俗点说就是在里面各种require js和require css，像这样：
<script src="./out/bundle.js"></script>
引入你之前require的所有文件，各种css，js啊都被捆绑成一个bundle.js文件然后被引用...
上面说到的加载器，需要我们去通过npm下载相应的依赖，比方说babel-loader，当webpack检测到.js或.jsx后缀或者ES2015的时候，它会帮我们调用babel来转译它们，{ "name": "taobao_web", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.4.0", "babel-loader": "^6.2.1 ", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "css-loader": "^0.23.1", "file-loader": "^0.8.5", "sass-loader": "^3.1.2", "style-loader": "^0.13.0", "url-loader": "^0.5.7" }, "dependencies": { "node-sass": "^3.4.2" } }
你可以把它复制过去作为你的package.json文件，再npm install一键安装就行，也可以像下面这样单独安装（不全，根据需要选择安装就行）：
npm install style-loader css-loader url-loader babel-loader sass-loader file-loader --save-dev
相应的加载器，依赖安装完之后，把需要转译打包的文件放在入口文件那里，在命令行输入 webpack -w ，自动帮你做好工作。
上面举的例子是比较简单的，再复杂点的会有多个入口文件，这时候你可以把入口文件写出这个样子：
entry: { page1: "entry.js", page2: "entry2.js" }, output: { path: path.join(__dirname, ‘out‘), publicPath: "./out/", filename: ‘[name].js‘ }
将会被捆绑成两个文件page1.js和page2.js...
3 注意点...
等我后面想到再补充吧~
原文：http://www.cnblogs.com/tianheila/p/5136519.html