使用webpack搭建ReactApp案例详解-tutorial js-php.cn

使用webpack搭建ReactApp案例详解

php中世界最好的语言

Lepaskan： 2018-05-25 14:04:32

asal

1142 orang telah melayarinya

这次给大家带来使用webpack搭建ReactApp案例详解，使用webpack搭建ReactApp的注意事项有哪些，下面就是实战案例，一起来看一下。

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

Salin selepas log masuk

使用淘宝 NPM 镜像

使用 React 和 Webpack 需要安装很多依赖包，不走代理的话速度会非常慢，也很容易出错，所以这里推荐使用淘宝的 npm 镜像来安装，速度非常理想。

使用淘宝镜像安装 npm 包只需要两步即可：

安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

Salin selepas log masuk

使用 cnpm 来安装包

只需要将 npm 替换成 cnpm 即可获得高速下载。

cnpm install [name]

Salin selepas log masuk

下文中给出的所有安装依赖包的命令都使用 cnpm 安装的。你也可以用 npm。

开始第一个 React

初始化一个 json 配置文件

npm init

Salin selepas log masuk

执行上面这条命令后输入一些信息即可创建 json 文件，这个文件也可以手动建。entry point 要填 index.js，其他的随意。

安装 React

cnpm install react react-dom --save

Salin selepas log masuk

安装编译工具 babel

复制代码代码如下:

cnpm install babel-core babel-loader babel-preset-react babel-preset-es2015 --save-dev

安装打包工具 wepback

全局的和当前文件夹的最好都装上，这样可以花式打包。

cnpm install webpack webpack-cli --save-dev
cnpm install webpack-dev-server --save-dev
cnpm install webpack webpack-cli -g
cnpm install webpack-dev-server -g

Salin selepas log masuk

配置 webpack

为了方便，以下所有文件都建在同一个文件夹下面。

新建 webpack.config.js 并添加以下内容

const path =require('path'); 
module.exports = { 
 entry: path.resolve(dirname, 'index.js'), 
 output: { 
 path: path.resolve(dirname, ''), 
 filename: "bundle.js" 
 }, 
 mode: 'development',
 module: { 
 rules: [ 
  { 
  test: /\.js$/, 
  exclude: /node_modules/, 
  loader: "babel-loader", 
  options: { 
   presets: ["es2015","react"] 
  } 
  } 
 ] 
 } 
};

Salin selepas log masuk

在 webpack4 中 mode 属性如果不指定会有警告。

创建测试文件

新建 index.js 文件

import React from 'react'; 
import ReactDOM from 'react-dom'; 
 ReactDOM.render( 
 <h1>我的第一个react例子</h1>, 
 document.getElementById('root') 
 );

Salin selepas log masuk

新建 index.html 文件

<!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="UTF-8" /> 
 <title>example</title> 
 </head> 
 <body> 
 <p id="root"></p> 
 <script src="bundle.js"></script> 
 </body> 
 </html>

Salin selepas log masuk

启动

最后执行 webpack 即可将 index.js 打包生成浏览器可执行的 bundle.js 文件。此时，index.html 文件已经可在浏览器中执行了。

附上我的 package.json 文件，直接执行 cnpm install 就能安装所有依赖。

{
 "name": "myapp",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "start": "webpack",
 "start:dev": "webpack-dev-server"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "babel-core": "^6.26.0",
 "babel-loader": "^7.1.4",
 "babel-preset-es2015": "^6.24.1",
 "babel-preset-react": "^6.24.1",
 "webpack": "^4.2.0",
 "webpack-cli": "^2.0.12",
 "webpack-dev-server": "^3.1.1"
 },
 "dependencies": {
 "react": "^16.2.0",
 "react-dom": "^16.2.0"
 }
}

Salin selepas log masuk

热启动

如果 index.js 发生了改变，则需要再编译打包一次，才能更新 bundle.js 文件，这样效率非常低。webpack 提供了一条命令可以实时进行编译打包。