一、新建乙個資料夾。
mkdir webpack-react-demo右鍵新建檔案也行。這裡使用 npm init 初始化專案的方式自動生成。
在webpack-react-demo資料夾下進入cmd命令列，輸入npm init，一路enter就行。
三、安裝相關的依賴包
react相關： react 、react-dom
babel相關： babel-core、babel-preset-es2015 、babel-preset-react
webpack相關： webpack、babel-loader 、webpack-dev-server
css loader: style-loader css-loader
四、webpack配置檔案
根目錄下新建webpack.config.js檔案
const path = require("path");
module.exports = ,
module:,]},
// devserver:
}
return
}
檔案
import react from "react"
import reactdom from "react-dom"
import "./../css/test.css"
/*test.css檔案*/
body
dist是打包之後的資料夾。
七、執行webpack命令
上面需要安裝webpack-cli 選yes裝一下。
另外這裡需要安裝一下babel-loader@7 的版本。
然後在執行webpack命令，就可以看到打包成功了。
然後在瀏覽器中開啟index.html 就能看到如下效果。
然後我們再試試熱更新，輸入webpack-dev-server
在瀏覽器中輸入localhost：8080.
然後我們改下test.css檔案把背景色改為藍色試試。
注意：這裡要把index.html檔案中js的引用改一下。
webpack-dev-server這裡執行的是開發環境，會直接在記憶體中找bundle.js。
使用webpack-dev-server --open會自動開啟瀏覽器哦。
八、npm start 和npm build的設定。
腳手架中npm start的執行，其底層就是webpack-dev-server的執行。
npm build 就是webpack命令的執行。
在package.json中scripts項作如下配置：
"scripts": ,當然，真正的腳手架裡配置遠遠比這裡介紹的要多，封裝的也要更好。這裡只是簡單的實現了乙個react的簡易版腳手架把。
webpack 在構建react時候的peizhi
1.安裝webpack 全域性安裝 sudo npm install g webpack 本專案安裝 npm i webpack d 目錄結構 2.webpack配置 每個專案下都必須配置有乙個 webpack.config.js 它的作用如同常規的 gulpfile.js gruntfile.js...
前端webpack構建react系列三 分模組打包
分模組打包檔案 在生產環境中，我們應該盡量減小js檔案的大小，將框架性的js裝載在乙個檔案中利用瀏覽器的快取機制節約載入資源耗費時間 分塊思路 1 react，react dom這種由第三方維護的框架，一般不會進行更新。真要更新就麻煩了，親身經歷，上級部門強制要求修復語言漏洞，硬逼著我們將某老專案p...
webpack 1 x構建react專案簡單配置
var path require path var webpack require webpack var openbrowserplugin require open browser webpack plugin var htmlwebpackplugin require html webpack...