前端基础-一步步搭建webpack4(react篇 )一

149 阅读3分钟

创建一个空的项目

mkdir init-react 创建 init-react 文件夹

cd init-react 前往 init-react 文件夹

npm init 生成package.json

接下来就可以一步步来创建一个webpack4+react的项目了

生成一个简单的react页面,并且通过webpack4,运行起来

生成index.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>init-react</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

安装react react-dom webpack

yarn add react react-dom

yarn add webpack -D

创建src文件夹,在src文件下创建index.js,这是一个入口文件,并且添加App.js写第一个react componet

// src/index.js
import React from "react";
import ReactDom from "react-dom";
import App from "./App"; //引入src/app.js

ReactDom.render(<App /> , document.getElementById("app"))
// src/App.js
import React from 'react'
const App = () => {
    return(
        <div>
            i am app view
        </div>
    )
}
export default App;

接下来,就要使用webpack4打包这个文件了,并且运行起来

首先我们先安装一下,我们接下来要使用的一些依赖

yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react -D

首先webpack需要一个配置文件,我们在主目录下生成一个webpack.config.js

// webpack.config.js
const webpack = require("webpack");
const path = require("path"); // nodejs的模块 path
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 在我们再次打包文件时,需要清除上次留存的文件,需要用到clean-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development", // mode 分为 development production
  entry: ["./src/index.js"], // 入口文件
  output: {
    path: path.join(__dirname, "dist"), // 输入目录
    filename: "bundle.js" // 文件名称
  },
  optimization: {
    splitChunks: {
      chunks: "all" // 所有的chunks 代码公共的部分 分离出来成为一个独立的文件
    }
  },
  resolve: {
    extensions: [".js", ".jsx"] // 自动解析确定的扩展,省去你引入组件写后缀的麻烦
  },
  module: {
    // 编译规则
    rules: [
      // 也就是以前的loader
      {
        test: /\.jsx?$/, // 正则表达式,匹配编译的文件
        exclude: /node_modules/, // 排除特定条件,如通常会写node_modules,即把某些目录/文件过滤掉
        use: [
          {
            loader: "babel-loader" // loader 必需要有它,它相当于是一个test匹配到的文件对应的解析起,babel-loader、style-loader、sass-loader等等
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(), // clean-webpack-plugin的基本用法
    new HtmlWebpackPlugin({
      filename: "index.html", // 最终生成的文件名
      template: path.join(__dirname, "index.html")
    })
  ],
  devServer: {
    hot: true, // 热更新
    contentBase: path.join(__dirname, "./dist"), // 需要启动的文件名
    host: "0.0.0.0", // 可以使用手机访问
    port: 8080, // 端口,
    historyApiFallback: true, // 该选项的作用所有的404都链接到index.html
    proxy: {
      // 代码到后端的服务地址,会拦截所有以api开头的请求地址
      api: "http://localhost:3000"
    }
  }
};

接下来,我们需要创建.babelrc 文件,.babelrc就是babel的配置文件,类似于ESLint(.eslintrc)。

// .babelrc
{
  "presets": [["@babel/preset-env"], "@babel/preset-react"]
}

所有文件编写完成后,需要在package.json中,配置一下我们的启动命令

// package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.config.js --color --propgress" // 添加这一行
  },

最终在我们的命令行输入 yarn run dev,没有输出错误后,打开浏览器,输入网站http://localhost:8080/就可以看到 i am app view了。