本地通过webpack搭建react环境

安装webpack和webpack-dev-server

1
2
npm i webpack -D
npm i webpack-dev-server -D

说明1: devDependencies是开发依赖，只会在打包过程中用到，不会包含到最后的代码中
说明2: 如果想安装指定版本的webpack，使用npm install –save-dev webpack@<版本号>格式

修改package.json

1
2
3
4
5
"scripts": {
   "a" :"webpack --config ./build/webpack.dev.conf.js",
   "b" :"webpack-dev-server --config ./build/webpack.dev.conf.js",
   "test": "echo \"Error: no test specified\" && exit 1"
 },

devServer常用配置

/build/webpack.dev.conf.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig={
    title: 'hello,零和壹在线课堂', // html5文件中<title>部分
    filename: 'front.html', // 默认是index.html，服务器中设置的首页是index.html，如果这里改成其它名字，那么devServer.index改为和它一样
    template: './src/template/daqi.html', // 如果觉得插件默认生成的hmtl5文件不合要求，可以指定一个模板，模板文件如果不存在，会报错，默认是在项目根目录下找模板文件，才模板为样板，将打包的js文件注入到body结尾处
    inject:'body', // true|body|head|false，四种值，默认为true,true和body相同,是将js注入到body结束标签前,head将打包的js文件放在head结束前,false是不注入，这时得要手工在html中加js
}
module.exports = {
    entry: './src/main', //main.js中的js可以省略，前面的./不能省
    output:{
        path:path.resolve(__dirname,'../dist'),
        filename:'./dist/app-[hash].js',
        hashDigestLength: 8 // 默认hash长度20，限制8个字节
    },
    plugins: [new HtmlWebpackPlugin(HtmlWebpackPluginConfig)], //先不配置插件，看看效果
    devServer: {
      contentBase: path.join(__dirname, "../dist"), //网站的根目录为 根目录/dist
      port: 9000, //端口改为9000
      host: '0.0.0.0', //指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问，指定如下：0.0.0.0，外部需要通过本地ip地址来访问
      open:true, // 自动打开浏览器
      index:'front.html', // 与HtmlWebpackPlugin中配置filename一样
      inline:true, // 默认为true, 意思是，在打包时会注入一段代码到最后的js文件中，用来监视页面的改动而自动刷新页面,当为false时，网页自动刷新的模式是iframe，也就是将模板页放在一个frame中
      hot:false,
      compress:true //Gizp压缩，需要服务器开启
    }
}

创建好项目目录

项目根目录
│ package.json
├───node_modules
│ └╌╌ 下面是npm包
├───dist
│ └╌╌╌╌╌logo.jpg
├───build
│ ├╌╌╌╌╌ build.js
│ ├╌╌╌╌╌ webpack.base.conf.js
│ ├╌╌╌╌╌ webpack.dev.conf.js
│ └╌╌╌╌╌ webpack.prod.conf.js
├───src
│ ├╌╌╌╌╌ main.js
│ └╌╌╌╌╌tmp
│ ├╌╌╌╌╌home.js
│ ├╌╌╌╌╌about.js
│ └╌╌╌╌╌contact.js
│ └╌╌╌╌╌template
│ └╌╌╌╌╌daqi.html // 为hmtl插件的模板
│ └╌╌╌╌╌images
│ └╌╌╌╌╌logo.jpg

打包

1
npm run a

会在dist目录下生成实际的页面

开启服务器

1
npm run b

不会在dist目录下生成实际的页面，会在内存中生成

使用HtmlWebpackPlugin插件生成首页

安装html-webpack-plugin插件

1
npm i html-webpack-plugin -D

加入react

方式一

直接在模板页面引入了三个库： react.min.js 、react-dom.min.js 和 babel.min.js

  • react.min.js - React 的核心库
  • react-dom.min.js - 提供与 DOM 相关的功能
  • babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);
</script>
 
</body>
</html>

注意这里的

1
<script type="text/babel">

方式二

  1. npm install –save react 安装react。
  2. npm install –save react-dom 安装react-dom。

如果直接修改入口文件的main.js

1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component{
  render() {
    return <h1>Hello, world!</h1>;
  }
};

ReactDOM.render(<Example />, document.getElementById('root'));

执行

1
npm run b

命令行会报错

1
2
ERROR in ./src/main.js
Module parse failed: Unexpected token (10:11)

原因是需要安装babel来编译jsx

  1. npm install –save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 安装babel相关的包。（必需， 否则react中的语法会报错）

注意dependencies和devDependencies对应的就是–save和–save-dev
–save和–save-dev的区别(也就是dependencies和devDependencies的区别)：

  • –save： 项目上线运行仍然要用到的东西，比如react， 上线后仍然需要。
  • –save-dev： 仅开发阶段所需要，比如webpack， 仅开发的阶段需要，项目上线之后并不需要。
修改webpack配置webpack.dev.conf.js
1
2
3
4
5
6
7
8
9
10
11
loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: '/node_modules/',
        query: {
          presets: [
            'es2015', 'stage-0', 'react'
          ]
        }
      }

loaders中的test, loader, exclude：

分别表示对于怎样的文件，用什么loader来处理， 除开哪些文件。图中的loader的意思是，对于node_modules以外的后缀名为js或者jsx的文件， 用babel-loader来处理。

至于为什么是后缀名为js或者jsx，这里是个正则，x后面跟的问号表示x出现0次或者1次。$表示结尾。

我们用babel-loader来处理后缀名为js或者jsx的文件，但是没有指明按照怎样的转码规则来处理这些文件，所以这里的presets指明的就是转码规则。

es2015: 用来编译es6语法
stage-0: 用来编译一些es7语法（还没定下来）
react: 用来编译react的语法

除了在上面使用query.presets之外，也可以在根目录下配置.babelrc

1
touch .babelrc

创建babel的配置文件。在文件中写入：

1
2
3
4
{
	"presets": ["es2015", "stage-0", "react"]	
}

执行打包

1
npm run b

报错

1
2
Module build failed: Error: Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

是因为babel-loader版本过高
当前是”babel-loader”: “^8.0.4”
改为”babel-loader”: “^7.1.2”

1
2
npm i
npm run b

大功告成。

参考资料

webpack从零开始第1课:安装webpack和webpack-dev-server
webpack-dev-server配置项
webpack命令行各参数的用法
webpack-dev-server的配置
react安装-菜鸟教程
Webpack + React学习笔记(一) —— 准备

本地通过webpack搭建react环境
https://thaneyang.github.io/2018/10/本地通过webpack搭建react环境.html
作者
ThaneYang
发布于
2018年10月6日
许可协议