使用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({ cleanAfterEveryBuildPatterns: ["./build"] }),                     // 清除文件
    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 打包 

posted @ 2019-11-28 17:24  feiniao0822  阅读(380)  评论(0)    收藏  举报