前端基礎-一步步搭建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" // 添加這一行
  },
複製代碼