首先用npm初始化環境
mkdir react-webpack-demo
cd react-webpack-demo
npm init -y
安裝相關軟體包
npm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin -d
npm install babel-core babel-loader babel-plugin-transform-runtime -d
npm install babel-preset-env babel-preset-stage-0 babel-preset-react -d
npm install babel-preset-react -d
2.新增對html靜態檔案的支援
在根目錄下新建資料夾src, 在src內加入index.html index.js
在根目錄下新建webpack.config.js
在webpack.config.js中加入如下配置
const path = require(『path』);
const htmlwebpackplugin = require(『html-webpack-plugin』);
// 負責將html文件虛擬到根目錄下
let htmlwebpackplugin = new htmlwebpackplugin()
module.exports = ,
// 配置開發伺服器, 並配置自動重新整理
devserver: ,
// 裝載虛擬目錄外掛程式
plugins: [htmlwebpackplugin],
}在package.json內scripts中新增"dev": 「webpack-dev-server」
在src/index.html中新增內容
react-webpack-demo react-webpack-demo
高堂明鏡悲白髮, 朝如青絲暮成雪 在命令行內執行npm run dev, 即可看到剛新增的index.html內容
接下來我們配置babel對es6語法的支援, 以及對jsx語法的支援
3. 新增對js高階語法的支援
在專案根目錄, 新增.babelrc配置檔案 presets為語法配置,plugins為外掛程式配置
在webpack.config.js中新增module欄位, 進行外掛程式loader配置
// webpack.config.js
module.exports = ]}
};在src/index.html中加入id為root的div節點
react-webpack-demo
react-webpack-demo
高堂明鏡悲白髮, 朝如青絲暮成雪
class counter extends react.component ;
this.decrease = this.decrease.bind(this);
this.increase = this.increase.bind(this);
}// 加1
increase() )
}// 減一
decrease() )
}
render()
)}
附錄: 新增對sass語法的支援(沒興趣可以跳過)
安裝sass相關的loader
npm install style-loader css-loader node-sass sass-loader -d
在webpack.config.js內新增規則
// webpack.config.js
module.exports = ]}};
在src內新增index.scss
d es
ignw
idth
:750;@
func
tion
px2r
em
(designwidth: 750; @function px2rem(
design
widt
h:75
0;@f
unct
ionp
x2re
m(px)
#root
span }}
在index.js中新增import index.scss
最終效果:
手動建立簡單webpack專案及React使用
1 執行 npm init y 快速初始化專案 2 在專案根目錄建立src的源 目錄和dist產品目錄 3 在src目錄下建立 index.html 4 使用cnpm 下安裝 webpack,執行cnpm i webpack webpack cli d 5 注意webpack 4.x 提供了 約定大...
手動配置webpack
1.預設配置檔案的名字是 webpack.config.js webpack是node 寫出來的，所以寫node 語法 let path require path 自帶的 module.exports webpack.config.js是預設的配置名稱 或者webpackfile.js 如果要自己更...
手動配置webpack
1.預設匯出與預設匯入 執行npm i webpack wabpack cli d命令 安裝webpack相關包 在專案跟目錄中，建立webpack.config.js的webpack配置檔案 在webpack的配置檔案中，初始化如下基本配置 modules.exports 在package.jso...