試著用React寫專案-利用Webpack搭環境
最近都蛋疼，然後前些天開了個會就是關於“不加班就得死“的死命令，作為抵制加班的先頭兵，我感覺我時日無多是時候加快武裝自己的速度不然吃土都不配了，就在這個大條件下撿起我丟在地上的React。
ok，那既然知道要做什麼了，就要考慮用什麼來發布專案，這裡第一考慮到Webpack
那Webpack能幹什麼？
官方對他的解釋很簡單
This small tutorial will guide you through a simple example.
我們用Webpack 來構建專案處理一些打包的問題，當然你得有node.js環境
安裝Webpack以及簡單構建專案
首先我們要找一個地方把 npm初始化的行為做掉，我這裡建了個空目錄
接下來要初始化當前目錄的npm環境
npm init 
初始化完會有一個很多空欄位的
package.json檔案
預設入口 ：index.js
預設版本 “1.0.0
預設專案名：react
和一些預設標籤，這不要緊反正之後我們會加以修改
初始化完我們就可以裝webpack了
npm i webpack --save-dev我們的目錄會多一個node_modules資料夾，裡面一堆東西，你不用care裡面有什麼
接下來就構建下我們的專案
除了bundle.js是之後生成的其他都是手動建的
配置Webpack
他也有一個清單檔案，名為webpack.config.js
我們輸入以下內容
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'app/main.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
};entry : package.json 中 entry 對應內容
output : 預設為 dist 資料夾，每個 entry key 對應 key.js, common.js, key.css, common.css(如果沒有樣式檔案則沒有 css 檔案)。
然後就輸入一些 簡單的頁面內容來測試我們的專案是否正確(頁面程式碼來自官方demo)
app/component.js
'use strict';
module.exports = function () {
var element = document.createElement('h1');
element.innerHTML = 'Hello Wjj';
return element;
};app/main.js
'use strict';
var component = require('./component.js');
document.body.appendChild(component());然後是入口頁面
build/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
bundle.js 暫時沒有後面build會生成的
因為我們是用webpack釋出的所以在package.json做一下修改
"scripts": {
"build": "webpack"
}加完後 npm run build下就有這個bundle檔案了
一直build比較蛋疼為了更好地使用還需要加入webpack-dev-server
先下為敬
npm i webpack-dev-server --save下完後修改配置檔案
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
}在之後輸入
npm run dev效果如下
ok，簡單的搭建就完成了，接下來就可以幹React部分了