1.前言
初次接觸webpack 參考了網(wǎng)上的教程储矩，首先介紹一下webpack：我的理解：強大的打包工具，幫助實現(xiàn)項目的模塊化
1.1 為什么使用webpack
| 特色 | 優(yōu)點 |
|---|---|
| 模塊化 | 實現(xiàn)代碼的按需加載 |
| 代碼比如樣式和圖片的壓縮 | 解決大型網(wǎng)站或者應(yīng)用加載慢的問題 |
| 豐富的loader | 可以加載多種類型的文件整合到j(luò)s文件中 |
| 豐富的資源 | 可以整合第三方庫 |
2.開搞
2.1開始配置
- 全局安裝
npm install webpack -g
-
建立項目文件夾
結(jié)構(gòu)如下：
 ](http://upload-images.jianshu.io/upload_images/4289237-4e5ad59ea986cf23.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ](http://upload-images.jianshu.io/upload_images/4289237-ba7c77999e7c51d6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
（這里的package.json用來闡述依賴的文件等信息攒磨，可以通過命令行直接建立）
npm init
npm install //創(chuàng)建package.json,根據(jù)提示一步步設(shè)置相應(yīng)信息即可
2.2根據(jù)git資源及阮一峰react教程钻哩，我們將blog留言板功能劃分為3個組件，messageBoard.js messageForm.js messageList.js 并放置在components文件夾中杨凑。
代碼詳見：github link
2.3 react組件編寫完成后透典，在html文件夾中創(chuàng)建用戶界面晴楔，index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack with react</title>
</head>
<body>
<div id="container"></div>
<script src="../js/dist/bundle.js"></script>//這里的bundle.js文件是css文件，js文件通過webpack加載器整合后生成輸出到dist文件夾的
</body>
</html>
2.4 webpack文件配置
編輯webpack.config.js
var path = require('path');
module.exports = {
entry: './js/entry.js', ／／入口文件位置
output: {
path: path.join(__dirname, 'js/dist'),
filename: 'bundle.js'
}, ／／輸出文件位置及文件名稱
module: {
loaders: [{
test: /\.js|jsx$/,
loader: 'jsx?harmony' 這里是webpack最重要的部分峭咒，告訴文件用什么加載處理税弃。這里加載的是jsx！
}]
}
}
2.5 大功告成凑队，命令行運行 webpack
用瀏覽器查看index.html
