React+Webpack快速上手指南

时间 2019-11-12

标签 react+webpack react webpack 快速上手指南栏目 React 繁體版

原文原文链接

前言

这篇文章不是有关React和Webpack的教程，只是一篇可以让你快速上手使用目前这两种热门技术的前端指南，并假设你对二者有一个基本的认识。若是你想先行了解下React，能够放肆的移步至 React官方教程，若是你已经使用了其余的模块加载与资源打包技术，不妨也来看看 Webpack 提供的思路。css

webstorm+react+webpack

强烈推荐使用webstorm！。（固然你彻底可使用诸如atom，Sublime之类的编辑器，但之因此选择webstorm是由于它默认支持对react JSX 的语法高亮以及能够手动开启Emmet对jsx的支持，棒棒哒~）html

首先请这么组织你的项目结构：前端

--your project
  |--app
    |--components
      |--productBox.jsx
    |--main.js
  |--build
    |--index.html
    |--bundle.js(该文件是webpack打包后生成的)

用npm安装react、webpack

默认已经安装了nodejs，并输入：npm init根据提示输入内容并建立package.json文件
而后依次输入：java

npm install react --save-dev

npm install webpack --save-dev

安装最新版本的React与Webpack并将它们保存至package.json内的开发依赖项目中。node

建立webpack.config.js配置文件

新建一个名为webpack.config.js的文件，它应该长这个样：react

var path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './app/main.js'),
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js',
  }
};

其中entry指定了webpack的入口程序，比如c++和java中的main程序同样，咱们把最终要插入到页面指定位置的react模板写入main.js中：
app/main.jswebpack

var React = require('react');
var AppComponent = require('./components/productBox.js');
React.render(<AppComponent />, document.getElementById('content'));

以及引入的自定义react组件：
app/components/productBox.jsnginx

var React = require('react');
var ProductBox = React.createClass({
  render: function () {
    return (
      <div className="productBox">
        Hello World!
      </div>
    );
  }
});

module.exports = ProductBox;

而output则指定了webpack打包成功以后文件名称以及文件的存放位置。
依照以前指定的项目结构，咱们能够在index.html中直接引入打包生成的bundle.js，像这样：
build/index.htmlc++

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>React Test</title>
</head>
<body>
  <div id="content"></div>
  <script src="bundle.js"></script>
</body>
</html>

安装并启用webpack-dev-server

webpack-dev-server容许咱们能够把本地项目跑在像nginx那样的web服务器上，更重要的是咱们能够在package.json文件内定义scripts，同时修改webpack的配置文件来达到相似BrowserSync（即文件修改能被监听，并自动刷新浏览器）的效果！git

咱们先打开package.json，并找到scripts代码块。在没引入webpack-dev-server以前，咱们运行这个项目的姿式是这样的：
修改scripts为

"scripts": {
  "build": "webpack"
}

而且执行：

npm run build

项目就跑起来啦，可是每次修改程序咱们都要手动输入npm run build来跑项目，这无疑是一件很是蛋疼的事情。但有了webpack-dev-server光环，咱们的姿式应该是这样的：
为scripts添加

"scripts": {
  "build": "webpack",
  "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}

ps：dev里各属性值的意思是：

webpack-dev-server: 在 localhost:8080 创建一个 Web 服务器
--devtool eval:为你的代码建立源地址。当有任何报错的时候可让你更加精确地定位到文件和行号
--progress: 显示合并代码进度
--colors: 在命令行中显示颜色
--content-base build:指向设置的输出目录

而且在index.html里加入：
build/index.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>React Test</title>
</head>
<body>
  <div id="content"></div>
  <script src="http://localhost:8080/webpack-dev-server.js"></script>
  <script src="bundle.js"></script>
</body>
</html>

在webpack.config.js的入口处加入：

var path = require('path');

module.exports = {
  entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js',
  }
};

以便在进行改动时浏览器能够自动刷新。

最后执行：

npm run dev

你只要在浏览器打开这个地址：http://localhost:8080，webpack-dev-server会为你准备好一切，你只要敲一敲键盘，save一下，所见即所得。

Webpack Loader

讲到这里，咱们基本上就能够迅速搭建一个简单的web项目，但不得不提的是webpack loader。它是我我的认为相比于其余模块加载更牛X的地方，将它用于react的开发，结合react与生俱来的优越性能，二者完美无缺的配合简直就是黄金组合。

总的来讲webpack loader能够实现：

能够将React JSX语法转为js语句
React开发中支持ES6语法
支持经过import来直接引入css、less、sass甚至是图片
支持css中引用的图片大小在某一大小范围以内直接转为BASE64格式
。。。。。等等等

为了可以让以上功能奏效，咱们要先安装对应的：
babel-loader

npm install babel-loader --save-dev

css-loader

npm install css-loader --save-dev

less-loader

npm install less-loader --save-dev

style-loader

npm install style-loader --save-dev

url-loader

npm install url-loader --save-dev

而具体的实现，咱们只要在webpack的配置文件中加入module属性里的loaders：

var path = require('path');

module.exports = {
  entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel'
    }, {
      test: /\.css$/,
      loader: 'style!css'
    }, {
      test: /\.less$/,
      loader: 'style!css!less'
    },{ 
      test: /\.(png|jpg)$/, 
      loader: 'url?limit=25000' 
    }]
  }
};

经过指定文件后缀来执行对应的loader操做，咱们甚至能够轻松的引入其余类型的文件，最后全部被引入进来的文件都会通通打包到bundle.js中去！

开发环境下的优化

在开发React组件的代码中，在webpack的帮助下咱们都是经过require(‘react’)的方式引入ReactJS，默认的require()方法会在webpack打包的时候去遍历ReactJS及其依赖。试想下，若是咱们还引入了其余的库，例如jQuery、react-router、moment等，require都会以一样的方式去遍历，这会大大增长打包的时间。这显然会影响到开发的效率。

为了可以尽量的加速打包过程，咱们应该重写它的行为，鼓励在开发中使用依赖的压缩版本

假如咱们只引入了react，咱们能够这样修改webpack.config.js:

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

var config = {
  entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
  resolve: {
    alias: {
      'react': pathToReact
    }
  },
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js'
  },
  module: {
    noParse: [pathToReact],
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel'
    }, {
      test: /\.css$/,
      loader: 'style!css'
    }, {
      test: /\.less$/,
      loader: 'style!css!less'
    },{ 
      test: /\.(png|jpg)$/, 
      loader: 'url?limit=25000' 
    }]
  }
};

module.exports = config;

resolve属性里的alias用来告诉webpack，当引入react时，试图去匹配压缩过的react；
而module中的noParse则是告诉当webpack尝试去解析压缩文件时，这种行为是不容许的。

固然啦，细心的你可能会发现当引入更多的库时，这样写多少会显得有点冗余，为此下面有个更加优雅的写法：

var path = require('path');
var node_modules_dir = path.join(__dirname, 'node_modules');
var deps = [ 
  'react/dist/react.min.js',
  'react-router/dist/react-router.min.js',
  'moment/min/moment.min.js'
];
var config = {
  entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
  resolve: {
    alias: {}
  },
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js'
  },
  module: {
    noParse: [],
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel'
    }, {
      test: /\.css$/,
      loader: 'style!css'
    }, {
      test: /\.less$/,
      loader: 'style!css!less'
    },{ 
      test: /\.(png|jpg)$/, 
      loader: 'url?limit=25000' 
    }]
  }
};

deps.forEach(function (dep) {
  var depPath = path.resolve(node_modules_dir, dep);
  config.resolve.alias[dep.split(path.sep)[0]] = depPath;
  config.module.noParse.push(depPath);
});

module.exports = config;

瞬间biger起来了，待加以修饰以后，让咱们更加便捷高效的享受React与Webpack带来的乐趣吧。

相关的代码请狠狠点击这里查看，

文／Chester723（简书做者）原文连接：http://www.jianshu.com/p/418e48e0cef1 著做权归做者全部，转载请联系做者得到受权，并标注“简书做者”。