這篇文章將為大家詳細講解有關使用webpack4從零開始構建react開發環境的案例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
項目文件準備：
執行npm init,然后創建如下圖所示的文件。
在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"
},這樣，當執行npm start的時候，就會使用webpack-dev-server把index.js相關文件打包，生成bundle.js，這時候瀏覽器會打開一個窗口，執行index.html(contentBase里面定義了），又因為index.html里面引入了bundle.js，就可以把壓縮后的js文件執行起來。當然引入bundle.js這一步可以由我們強大的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'的元素廈門。在實際開發中，我們會把app.js渲染到這里，然后在app.js里面寫redux,react-router構成的頁面的起點。
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();這個時候執行npm start,就可以在瀏覽器訪問http://localhost:8080看到Index.html里面的內容啦啦。
關于“使用webpack4從零開始構建react開發環境的案例”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
