前端基础-一步步搭建webpack4（react篇）一

时间 2019-11-29

标签前端基础步步搭建 webpack4 webpack react 栏目 React 繁體版

原文原文链接

建立一个空的项目

mkdir init-react 建立 init-react 文件夹javascript

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

npm init 生成package.jsonjava

接下来就能够一步步来建立一个webpack4+react的项目了node

生成一个简单的react页面，而且经过webpack4，运行起来

生成index.html文件react

<!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 webpackwebpack

yarn add react react-domweb

yarn add webpack -D正则表达式

建立src文件夹，在src文件下建立index.js，这是一个入口文件，而且添加App.js写第一个react componetnpm

// 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打包这个文件了,而且运行起来json

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

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了。

前端基础-一步步搭建webpack4（react篇 ）一

建立一个空的项目

生成一个简单的react页面，而且经过webpack4，运行起来

前端基础-一步步搭建webpack4（react篇）一