Webpack 4.x搭建react開發環境的方法步驟

2019-11-19 13:14:53

字體：大中小

來源：轉載

供稿：網友

本文介紹了了Webpack 4.x搭建react開發環境的方法步驟，分享給大家，也給自己留個筆記

必要依賴一覽(npm install) 安裝好。

"dependencies": {  "babel-core": "^6.26.3",  "babel-loader": "^7.1.5",  "babel-preset-env": "^1.7.0",  "react": "^16.4.2",  "react-dom": "^16.4.2",  "webpack": "^4.16.5"  ...}

babel系列是干什么用的呢？是為了支持es6以上的高級語法的編譯。但是因為react有jsx這個東西存在，所以單純的babel是不夠的，此外要讓babel作用于webpack，需要給webpack添加一個loader（以前版本叫loader，4.x版本開始改用‘rules'），在工程根目錄新建webpack.config.js文件，并添加如下代碼：

var path = require('path');var node_modules = path.resolve(__dirname, 'node_modules');var deps = [  ];//以上代碼可以忽略，沒有必要不要添加noParse，因為依賴代碼中可能會有環境的判斷，而瀏覽器中是拿不到process變量的，會報錯！var config = {  //這里是打包的入口 entry: path.resolve(__dirname, './react/app.js'), resolve: {  alias: {  } }, //打包完成后輸出到./build/bundle.js文件中 output: {  path: path.resolve(__dirname, './build'),  filename: 'bundle.js', }, mode: 'development', module: {   //上述的規則，loader就放在這里，這段沒什么好說的，從Webpack官方文檔上直接拿來用  rules: [    {     test: //.js$/,     exclude: /(node_modules|bower_components)/,     use: {      loader: 'babel-loader',      options: {        //剛剛下載的module之一       presets: ['babel-preset-env']      }     }    }   ] }};//遍歷你的自定義要排除的依賴，安裝到node_modules里的依賴一般不需要排除掉deps.forEach(function (dep) {  var depPath = path.resolve(node_modules, dep);  config.resolve.alias[dep.split(path.sep)[0]] = depPath;  config.module.noParse.push(depPath); });module.exports = config;

以上代碼可以直接用，請先將注釋去掉。有了以上文件配置，你可以直接在package.json中添加scripts來打包你的app.js。

..."scripts": {  ...  "build-config": "webpack",  ...}...

執行npm run build-config可執行打包操作，但是目前為止還是會報錯，因為缺少babel設置，webpack打包時無法識別jsx語法，什么時jsx語法？就是在js代碼中寫的類似于dom結構的東西，如下:

...<h1 onClick={this.handleClick.bind(this)} style={{ color: "red" }}>  {'Hello ' + this.state.text}</h1>...

要解析這個東西還需要添加.babelrc文件，在其中添加：

{  "plugins": ["transform-react-jsx"]}

這句主要是說在babel參與打包時，會啟用jsx轉換成js的插件。到這里你已經可以成功打出你想要的bundle.js

> webpackHash: e716d360a6a752006c09Version: webpack 4.16.5Time: 973msBuilt at: 2018-08-14 15:19:14  Asset   Size Chunks       Chunk Namesbundle.js 715 KiB  main [emitted] mainEntrypoint main = bundle.js[./react/app.js] 2.74 KiB {main} [built]  + 21 hidden modules

webpack打包的好處就是這里，可以讓你的app加載速度更快，如上的包總計715kb，隱藏了沒有用到的模塊21個。這就是為什么要搭手腳架開發的理由。

jsx-transform的坑

此外還有一點要說一下，就是在引入React時，請整個引入，要么就額外引入它在編譯后的代碼中可能會用到的api，否則會說什么什么沒找到而導致頁面加載不出來。看編譯后的代碼：

var _react = __webpack_require__(/*! react */ "./node_modules/react/index.js");var _react2 = _interopRequireDefault(_react);..._createClass(MyTitle, [{key: "handleClick",value: function handleClick() {  this.setState({  text: "Clicked"  });}}, {key: "render",value: function render() {  return _react2.default.createElement(  "h1",  { onClick: this.handleClick.bind(this), style: { color: "red" } },  'Hello ' + this.state.text  );}}]);

如果你不引入react, 編譯后render()函數中的_react2會是React.createElement而React顯然是找不到這個變量的。看到編譯后的代碼，你可能更能理解，哦在jsx的dom中那樣寫原來是這個意思啊???

Vscode中開發，需要配置好eslint

react中有大量的es6的寫法，如果不配置eslint你會看到大量飄紅，首先是在項目的開發環境安裝依賴：

"devDependencies": {  ???  "eslint": "^5.3.0",  "eslint-plugin-import": "^2.14.0"  ???}

在項目根路徑下添加.eslintrc.json，并添加以下代碼[^eslint]：

{ "parserOptions": {   //使用的ecma版本  "ecmaVersion": 6,  "sourceType": "module",  //使用jsx特性  "ecmaFeatures": {   "jsx": true  } }, "rules": {   //忽略console的警告  "no-console": "off",  "semi": ["error", "always"] }}

參考：