react+webpack开发环境配置

时间 2019-11-11

标签 react+webpack react webpack 开发环境配置栏目 React 繁體版

原文原文链接

　　react是目前很是热门的前端框架，提倡组件化开发。所谓的组件，简单理解，就是一个独立的页面部件（包括页面模版，样式，逻辑等），它是一个独立的总体。javascript

　　webpack，是一个模块打包工具，其主要功能，就是将浏览器端没法识别的代码，经过各类loader和plugin，生成浏览器可用的代码。好比，咱们能够在浏览器端使用ES2015和JSX编码的文件。css

　　在使用react进行组件化开发以前，咱们首先须要配置一个咱们能够使用的开发环境，下面，咱们将一步步讲解，配置一个基本的开发环境。其中安装的文件都是当前最新版本。在开始以前，请先保证你已经安装了node。html

1. 建立测试项目

　　为了可让咱们每一步均可以进行测试，了解其中都作了什么，咱们提早编写咱们的测试项目。你们能够先不用深刻理解。（在咱们之后的项目中，咱们可能会用JSX文件和sass文件，在这里咱们尽可能真实且简单的还原项目）。前端

　　1）首先咱们建立一个项目文件夹，名为testjava

　　2）在文件中添加index.jsx，hello.jsx, index.scss, index.htmlnode

1 // index.scss
2 
3 $color: #f40;
4 
5 h1 {
6     color: $color;
7 }

1 // hello.jsx
2 module.exports = 'Hello React';

 1 // index.jsx 
 2 // 引入react和react-dom模块
 3 // 使用ES2015模块导入语法
 4 import React from 'react';
 5 import ReactDOM from 'react-dom';
 6 
 7 // 引入自定义的hello.jsx
 8 var text = require('./hello.jsx');
 9 
10 // 引入咱们编写的sass文件
11 require('./index.scss');
12 
13 // 编写一个简单的组件
14 class App extends React.Component {
15     render(){
16         return (
17             <h1>{text}</h1>
18         );
19     }
20 };
21 
22 // 建立一个组件实例，将组件挂载到文档结构中
23 ReactDOM.render(<App />, document.body);

 1 // index.html
 2 
 3 <!DOCTYPE html>
 4 <html>
 5   <head>
 6     <meta charset="UTF-8">
 7     <title>My test</title>
 8   </head>
 9   <body>
10       <script type="text/javascript" src="bundle.js"></script> // bundle.js是由webpack自动生成的文件，文件名经过配置webpack设置
11   </body>
12 </html>

　　以上是咱们项目的基本结构。react

　　为了方便项目文件的管理，咱们使用npm，在项目根目录下使用npm init --yes，在根目录下生成一个package.json，管理项目依赖等。webpack

2. 安装webpack

　　1）以命令行工具的形式使用webpack时，在全局安装webpack。git

　　npm install webpack -g

　　2) 编写本身的构建脚本，或由项目指定须要依赖的webpack，本地安装，webpack只是构建工具的角色，应该安装在dev－dependencies中，可是，目前咱们只使用命令行工具，这种安装方式，只是做为介绍，在以后的搭建过程当中并不会用到。github

　　npm install webpack --save-dev

3. 配置基本的webpack

　　在项目根目录下添加webpack.config.js配置文件，它是一个Node.js模块格式的配置文件，直接导出一个配置对象。

 1 // 用于拼接路径
 2 var path = require('path');
 3 
 4 module.exports = {
 5     // 指定项目入口
 6     entry: path.resolve(__dirname, 'index.jsx'),
 7 
 8     // 对输出结果描述
 9     output: {
10         // 输出路径
11         path: path.resolve(__dirname, 'build'),
12         // 输出的文件名
13         filename: 'bundle.js'
14     },
15 
16     // 配置模块使用的加载器
17     module: {
18         loaders: [
19         {
20             // 假设咱们拥有一个编译sass加载器
21             // 匹配字符串
22             test:/\.scss$/,
23             // 使用的加载器，不能够省略加载器的后缀-loader
24             loaders:['style-loader', 'css-loader', 'sass-loader']
25         }
26     }
27 }

4. babel，sass加载器

　　能够从咱们的项目结构中发现，咱们使用了.jsx文件和.scss文件，浏览器中没法正常使用这类文件，咱们经过添加加载器，将进行解析，以便浏览器使用。

　　1）babel加载器

　　npm install babel-core babel-loader --save-dev

　　2）配置.babelrc文件

　　　　在项目根目录下建立一个.babelrc文件，存放一个对象，分别用presets字段存放规则，plugins字段存放插件，目前咱们只用到ES2015和react规则

　　npm install babel-preset-es2015 babel-preset-react --save-dev // 添加规则

　　{
  　　"presets": ["react", "es2015"]
　　}

　　3) sass加载器

　　npm install node-sass style-loader css-loader sass-loader --save-dev

　　4) 配置webpack.config.js配置文件

 1     // 模块部分更新为下面代码
 2 
 3     module: {
 4         loaders: [
 5         {
 6             test:/\.scss$/,
 7             loaders:['style-loader', 'css-loader', 'sass-loader']
 8         },
 9         {
10             test:/\.jsx?$/,
11             loaders: ['babel-loader']
12         }]
13     },

　　此时便可正常加载.scss和.jsx文件。

5. 安装react和react-dom

 npm install react react-dom --save

　　到此，咱们在项目根目录下执行webpack已经已经在根目录下生成一个bundle.js文件，咱们能够正常在index.html文件文件引用，而且在浏览器中查看。

以后的内容，咱们将会介绍webpack的插件的用法，以及webpack-dev-server配置方法。

1. html-webpack-plugin

　　咱们能够发现咱们index.html文件中，只是一个空的HTML结构和引入了生成的bundle.js文件，所以咱们能够利用html-webpack-plugin插件来自动生成index.js文件。

　　1) 下载插件

　　npm install html-webpack-plugin --save-dev

　　2）配置webpack.config.js文件

　　首先在文件头部引入插件，而后在添加一个plugins字段，并在其中一个插件对象实例。

1 var HtmlWebpackPlugin = require('html-webpack-plugin');
2 
3 module.exports ={
4    plugins: [
5         new HtmlWebpackPlugin({
6             title: 'My test'
7         })
8     ]
9 }

　　此时咱们删除index.html和bundle.js，webpack自动在build路径下建立这两个文件。

2. webpack-dev-server

　　咱们能够使用webpack --wacth来监控代码，只要代码一修改，自动更新bundle.js，可是浏览器的网页还须要手动刷新。在开发工程中，很是的不方便。webpack-dev-server为咱们解决了这个问题，它是一个小型服务器，在开发过程当中能够实时刷新网页。

　　下面咱们来安装配置webpack-dev-server。

　　1）全局安装webpack-dev-server

　　npm install webpack-dev-server -g

　　2）配置webpack-dev-server

1     // 添加devServer字段,其中字段变更比较大，配置时须要根据文档进行配置
2     devServer: {
3         historyApiFallback: true,
4         inline: true,
5         contentBase:'./build/',
6         port:'8086'   // 我电脑上默认的8080端口没法访问，因此设置port为8086
7     },

　　3）设置运行快捷方式

　　在package.json中的scripts字段中添加下面一行，在命令行中输入npm run dev，直接启动webpack-dev-server，能够在指定端口进行访问。

1   "scripts": {
2     "dev": "webpack-dev-server"
3   },

3. 组件热加载（HMR）

　　咱们在上述描述下，搭建的环境，每修改一次代码，页面都会总体刷新一次，咱们更但愿，页面局部刷新修改的组件。所以就有了组件热加载这个概念。咱们能够直接安装babel-preset-react-hmre实现HMR。

　　npm install babel-preset-react-hmre --save-dev

.babelrc中的配置改成：

1 {
2   "presets": ["react", "es2015"],
3   "env": {
4     "development": {
5       "presets": ["react-hmre"]
6     }
7   }
8 }

并将启动命令改成：

"scripts": {
    "dev": "webpack-dev-server --hot"
  },

此时咱们在命令行输入npm run dev，便可。