快捷導(dǎo)航

Webpack 4.x搭建react開發(fā)環(huán)境的方法步驟

更新時(shí)間：2018年08月15日 14:36:39 作者：Countbunny

這篇文章主要介紹了Webpack 4.x搭建react開發(fā)環(huán)境的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了了Webpack 4.x搭建react開發(fā)環(huán)境的方法步驟，分享給大家，也給自己留個(gè)筆記

必要依賴一覽(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以上的高級(jí)語(yǔ)法的編譯。但是因?yàn)閞eact有jsx這個(gè)東西存在，所以單純的babel是不夠的，此外要讓babel作用于webpack，需要給webpack添加一個(gè)loader（以前版本叫l(wèi)oader，4.x版本開始改用‘rules'），在工程根目錄新建webpack.config.js文件，并添加如下代碼：

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var deps = [ 
 ];

//以上代碼可以忽略，沒(méi)有必要不要添加noParse，因?yàn)橐蕾嚧a中可能會(huì)有環(huán)境的判斷，而瀏覽器中是拿不到process變量的，會(huì)報(bào)錯(cuò)！
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: {
   //上述的規(guī)則，loader就放在這里，這段沒(méi)什么好說(shuō)的，從Webpack官方文檔上直接拿來(lái)用
  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;

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

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

執(zhí)行npm run build-config可執(zhí)行打包操作，但是目前為止還是會(huì)報(bào)錯(cuò)，因?yàn)槿鄙賐abel設(shè)置，webpack打包時(shí)無(wú)法識(shí)別jsx語(yǔ)法，什么時(shí)jsx語(yǔ)法？就是在js代碼中寫的類似于dom結(jié)構(gòu)的東西，如下:

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

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

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

這句主要是說(shuō)在babel參與打包時(shí)，會(huì)啟用jsx轉(zhuǎn)換成js的插件。到這里你已經(jīng)可以成功打出你想要的bundle.js

> webpack

Hash: e716d360a6a752006c09
Version: webpack 4.16.5
Time: 973ms
Built at: 2018-08-14 15:19:14
  Asset   Size Chunks       Chunk Names
bundle.js 715 KiB  main [emitted] main
Entrypoint main = bundle.js
[./react/app.js] 2.74 KiB {main} [built]
  + 21 hidden modules

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

jsx-transform的坑

此外還有一點(diǎn)要說(shuō)一下，就是在引入React時(shí)，請(qǐng)整個(gè)引入，要么就額外引入它在編譯后的代碼中可能會(huì)用到的api，否則會(huì)說(shuō)什么什么沒(méi)找到而導(dǎo)致頁(yè)面加載不出來(lái)?？淳幾g后的代碼：

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()函數(shù)中的_react2會(huì)是React.createElement而React顯然是找不到這個(gè)變量的?？吹骄幾g后的代碼，你可能更能理解，哦在jsx的dom中那樣寫原來(lái)是這個(gè)意思啊···

Vscode中開發(fā)，需要配置好eslint

react中有大量的es6的寫法，如果不配置eslint你會(huì)看到大量飄紅，首先是在項(xiàng)目的開發(fā)環(huán)境安裝依賴：

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

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

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

參考：