这次给大家带来使用webpack搭建reactapp案例详解，使用webpack搭建reactapp的注意事项有哪些，下面就是实战案例，一起来看一下。
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
使用淘宝 npm 镜像
使用 react 和 webpack 需要安装很多依赖包，不走代理的话速度会非常慢，也很容易出错，所以这里推荐使用淘宝的 npm 镜像来安装，速度非常理想。
使用淘宝镜像安装 npm 包只需要两步即可：
安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用 cnpm 来安装包
只需要将 npm 替换成 cnpm 即可获得高速下载。
cnpm install [name]
下文中给出的所有安装依赖包的命令都使用 cnpm 安装的。你也可以用 npm。
开始第一个 react
初始化一个 json 配置文件
npm init
执行上面这条命令后输入一些信息即可创建 json 文件，这个文件也可以手动建。entry point 要填 index.js，其他的随意。
安装 react
cnpm install react react-dom --save
安装编译工具 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
配置 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]
}
}
]
}
};
在 webpack4 中 mode 属性如果不指定会有警告。
创建测试文件
新建 index.js 文件
import react from 'react';
import reactdom from 'react-dom';
reactdom.render(
<h1>我的第一个react例子</h1>,
document.getelementbyid('root')
);
新建 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>
启动
最后执行 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
}
}
热启动
如果 index.js 发生了改变，则需要再编译打包一次，才能更新 bundle.js 文件，这样效率非常低。webpack 提供了一条命令可以实时进行编译打包。
webpack --watch
执行这条命令后，index.js 文件就能被动态编译打包了，非常方便。
不过上面的热启动还是很麻烦，还要手动刷新浏览器，这里还有很牛逼的。
直接执行 webpack-dev-server 即可自动刷新浏览器
如果要换端口的话，在启动命令后面加上--port 端口号即可，例如：webpack-dev-server --port 8001
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
如何开发一个自定义库
jquery动态添加点击事件步奏详解
以上就是使用webpack搭建reactapp案例详解的详细内容。