乐趣区

关于webpack:如何使用Webpack5徒手创建React项目

jiezi

未完待续。。。。

筹备工作，须要的依赖包 

// react react-dom
npm install react

// webpack 三剑客
npm i --save-dev webpack webpack-dev-server webpack-cli

// 面向 babel 编程，别忘记 html 模板
npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react html-webpack-plugin

css loader

npm install --save-dev style-loader css-loader

webpack.config.js 配置 

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {path: path.join(__dirname, '/dist'),
    filename: 'bundlefile.js'
  },
  module: {
    rules: [
      {
         test: /\.js$/,
         exclude: /node_modules/,
         use: {loader: 'babel-loader'}
      },
      {
         test: /\.css$/,
         use: [
            'style-loader',
            'css-loader'
         ]
      }
   ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}

.babelrc 文件配置 

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

在 src 文件夹下新建 index.js 入口文件

在 src 文件夹下新建 html 模板文件 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Send it react</title>
  <meta name="viewport" content="width=device-width, initial-   scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="main.js"></script>
</head>
<body>
  <div id="App"></div>
</body>
</html>

新建一个 react 入口文件
src/js/components

import React from 'react'
const App = () => {
  return(
     <div>
        <h1>Hello React</h1>
     </div>
   )
}
export default App;

package.json 配置如下，版本不肯定要跟我一样
npm run dev/npm run start

  "scripts": {
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production --config ./webpack.config.js --progress --color"
  },
  "devDependencies": {
    "@babel/core": "^7.22.6",
    "@babel/plugin-transform-runtime": "^7.22.6",
    "@babel/preset-env": "^7.22.6",
    "@babel/preset-react": "^7.22.5",
    "babel-loader": "^9.1.2",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^5.5.3",
    "raw-loader": "^2.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^5.88.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
退出移动版