在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的時(shí)候，就會(huì)使用webpack-dev-server把index.js相關(guān)文件打包，生成bundle.js，這時(shí)候?yàn)g覽器會(huì)打開(kāi)一個(gè)窗口，執(zhí)行index.html(contentBase里面定義了），又因?yàn)閕ndex.html里面引入了bundle.js，就可以把壓縮后的js文件執(zhí)行起來(lái)。當(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: 這個(gè)ReactDOM.render就是把元素渲染到index.html里面id為'app'的元素廈門。在實(shí)際開(kāi)發(fā)中，我們會(huì)把a(bǔ)pp.js渲染到這里，然后在app.js里面寫redux,react-router構(gòu)成的頁(yè)面的起點(diǎn)。

import React from 'react';
import ReactDOM from 'react-dom';

const title = 'My Minimal React Webpack Babel Setup';

ReactDOM.render(
 
{title}
,
 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(
 
{title}
,
 document.getElementById('app')
);

+ module.hot.accept();

這個(gè)時(shí)候執(zhí)行npm start,就可以在瀏覽器訪問(wèn)http://localhost:8080看到Index.html里面的內(nèi)容啦啦。

關(guān)于“使用webpack4從零開(kāi)始構(gòu)建react開(kāi)發(fā)環(huán)境的案例”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。