您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)使用webpack4從零開始構(gòu)建react開發(fā)環(huán)境的案例,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
項目文件準(zhǔn)備:
執(zhí)行npm init,然后創(chuàng)建如下圖所示的文件。
在index.html里面添加
<!DOCTYPE html> <html> <head> <title>The Minimal React Webpack Babel Setup</title> </head> <body> <div id="app"></div> <script src="./bundle.js"></script> </body> </html>
在webpack.config.js里面添加
module.exports = { entry: './src/index.js', output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js' }, devServer: { contentBase: './dist' } };
在package.json里面添加
"scripts": { "start": "webpack-dev-server --config ./webpack.config.js --mode development" },
這樣,當(dāng)執(zhí)行npm start的時候,就會使用webpack-dev-server把index.js相關(guān)文件打包,生成bundle.js,這時候瀏覽器會打開一個窗口,執(zhí)行index.html(contentBase里面定義了),又因為index.html里面引入了bundle.js,就可以把壓縮后的js文件執(zhí)行起來。當(dāng)然引入bundle.js這一步可以由我們強(qiáng)大的html-webpack-plugin完成。
安裝依賴
npm install --save-dev webpack webpack-dev-server webpack-cli npm install --save-dev @babel/core @babel/preset-env npm install --save-dev babel-loader npm install --save-dev @babel/preset-react
配置babel
在根目錄下新建.babelrc文件,然后添加
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ] }
在webpack.config.js里面添加babel-loader配置
module.exports = { ... module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'] } ] }, resolve: { extensions: ['*', '.js', '.jsx'] } ... };
引入react
npm install --save react react-dom
修改index.js: 這個ReactDOM.render就是把元素渲染到index.html里面id為'app'的元素廈門。在實際開發(fā)中,我們會把a(bǔ)pp.js渲染到這里,然后在app.js里面寫redux,react-router構(gòu)成的頁面的起點(diǎn)。
import React from 'react'; import ReactDOM from 'react-dom'; const title = 'My Minimal React Webpack Babel Setup'; ReactDOM.render( <div>{title}</div>, document.getElementById('app') );
配置react熱加載
npm install --save-dev react-hot-loader
webpack.config.js
const webpack = require('webpack'); module.exports = { ... plugins: [ new webpack.HotModuleReplacementPlugin() ], devServer: { contentBase: './dist', hot: true } ... };
修改index.js
import React from 'react'; import ReactDOM from 'react-dom'; const title = 'My Minimal React Webpack Babel Setup'; ReactDOM.render( <div>{title}</div>, document.getElementById('app') ); + module.hot.accept();
這個時候執(zhí)行npm start,就可以在瀏覽器訪問http://localhost:8080看到Index.html里面的內(nèi)容啦啦。
關(guān)于“使用webpack4從零開始構(gòu)建react開發(fā)環(huán)境的案例”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。