React+webpack從0到1開發一個todoMvc（一）

Zegendary發表於2017-12-13
ReactWebMVC

首先我們看一下我們完成後的最終形態：TodoMvc ：

TodoMVc

學習必要條件：略懂node.js，略懂ES6，然後你的電腦必須安裝有較新版本node，沒有的同學趕緊安裝。 好了，廢話不多說，直接開始。

第一部分原始碼：todoMvc-1step #webpack的配置

  1. 介紹：Webpack 是當下最熱門的前端資源模組化管理和打包工具。詳細見官網

  2. 安裝： $ npm install webpack -g 此時 Webpack 已經安裝到了全域性環境下，可以通過命令列 webpack -h 試試。 但通常我們會將 Webpack 以及相關依賴以這種方式安裝，如下： # 進入專案目錄 # 確定已經有 package.json，沒有就通過 npm init 建立 # 安裝 webpack 依賴 $ npm install webpack --save-dev # 安裝react.js依賴（i是install的簡寫，-S是--save的簡寫） $ npm i react react-dom -S 剩餘的依賴元件參照我原始碼中的package.json的依賴新增就好。最終，我們得到的package.json應該如下圖：

    package.json
    確保紅框中的內容一樣即可。

  3. 配置 現在我們已經安裝好了依賴，下面我們需要先把專案的目錄建好： . ├── node_modules # npm install 安裝的東西都跑著裡面來了 ├── src
    ├── components ├── app.js # react元件 ├── styles ├── main.styl # stylus檔案（類似於sass） ├── entry.js # 入口js檔案 ├── index.html # 入口頁面 ├── package.json # 專案描述檔案（內有相關依賴） └── webpack.config.js # webpack配置檔案 然後我們在webpack.config.js中新增配置： module.exports = { entry: [ "./src/entry.js" ], output: { path: './out/', filename: "bundle.js" }, module: { loaders: [ { test: /.js[x]?$/, loader: "babel-loader?presets[]=es2015&presets[]=react", include: /src/}, { test: /.css$/, loader: "style!css"}, { test: /.styl$/, loader: "style-loader!css-loader!stylus-loader"}, { test: /.(png|jpg)$/, loader: 'url?limit=8192'} ] } } 配置檔案將我們的入口檔案entry.js打包輸出到 ./out/bundle.js，我們直接在頁面index.html中引入bundle.js就好了 。不懂得話可以參考webpack的文件：webpack-usage 和 webpack-loader 關於/src目錄下的檔案內容可以直接到原始碼中檢視。 然後就可以小試牛刀啦，在終端中輸入： $ webpack 然後我們看到我們的目錄下多了個./out/bundle.js檔案，然後我們在瀏覽器開啟目錄下的index.html檔案可以看到內容並alert('success')

    todoMvc-step1

那麼恭喜你，第一步圓滿完成！ React+webpack從0到1開發一個todoMvc（二） React+webpack從0到1開發一個todoMvc（三）
React+webpack從0到1開發一個todoMvc（四）
React+webpack從0到1開發一個todoMvc（五）

相關文章