使用webpack 搭建React 项目（一）- 构建一个简单的react应用

准备工作

IDE：VS Code

Js框架：React

打包工具：Webpack

本地安装 node、npm

本文主要参考了以下网页：

https://github.com/theJian/build-a-hn-front-page
https://www.jianshu.com/p/324fd1c124ad

新建项目

npm init -y

npm install

*npm打头的都是npm命令，需要在node命令行中执行，如果使用VS Code开发，可以通过【Terminal】->【New Terminal】，打开一个终端窗口，输入以上命令

添加引用

# react 核心

npm install react react-dom --save

# webpack 以及本地调试

npm install webpack webpack-dev-server webpack-cli --save-dev

#babel 将react、es6转成浏览器能识别的js
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react

#清除打包后的文件，自动生成html

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

添加文件

1.webpack配置文件

根目录添加webpack.config.js

var path = require('path');

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWepackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: path.resolve(__dirname, 'app/index.js'), //入口文件
  output: {
    path: path.resolve(__dirname, 'build'),       //输出文件夹
    filename: 'bundle.js'　　　　　　　　　　　　　   //输入文件名
 }, mode: 'development',　　　　　　　　　　　　　　　 //none, development 或 production（默认）  module: { rules: [ { test: /\.jsx?$/, //使用babel-loader解析js文件和jsx文件 exclude: /node_modules/, loader: 'babel-loader' } ] }, plugins: [ new CleanWebpackPlugin(), // 清除文件 new HtmlWepackPlugin({ template: path.resolve(__dirname, './public/index.html'), // 固定配置 filename: 'index.html' // 生成对应的文件名  }) ], devtool: 'eval-source-map', devServer: { progress: true, //显示进度条 // quiet: true, // 把替换输出给清除掉。  overlay: { errors: true, warnings: true }, contentBase: path.join(__dirname, './build'), host: 'localhost', //域名 port: '8092', //端口 hot: true, //热更新 open: true }, }

2.html模板和入口js

根目录下新建app文件，下面添加index.js

import React from 'react';
import { render } from 'react-dom';

class HelloWorld extends React.Component {
  render() {
    return (
      <div>Hello World1!</div>
    );
  }
}

render(<HelloWorld />, document.getElementById("root"));

根目录下新建public文件，下面添加index.html

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>this is a react page</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

3.添加编译命令

package.json中scripts这一段增加start和build命令

"scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
}

4.babel配置文件

根目录下添加.babelrc

{
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "browsers": ["last 2 versions", "safari >= 7","ie >= 9"]
        }
      }],
      "@babel/preset-react" ], "plugins": [ ] }

5.修改后的目录结果

|—— app
    └── index.js       <- 入口文件
|—— build    　　　　　　<- 打包后的文件存放目录

|—— node_modules    　　<- npm引入的各种包

|—— public
    └── index.html     <- 模板文件

|—— .babelrc    　　　　<- babel配置文件

|—— package.json 　　　 <- 项目配置文件

└── webpack.config.js <- webpack配置文件

调试和打包

npm run start 本地调试

npm run build 打包