通过Webpack从零开始搭建React项目

最新推荐文章于 2024-07-20 20:03:08 发布

Bonnie-lu

最新推荐文章于 2024-07-20 20:03:08 发布

阅读量221

点赞数

分类专栏： react webpack 文章标签： webpack react.js javascript

本文链接：https://blog.csdn.net/weixin_41796119/article/details/126996301

版权

react 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

webpack

1 篇文章 0 订阅

订阅专栏

1.创建文件夹并初始化应用

mkdir webpack_react
cd webpack_react
npm init

2.根目录下创建src和public文件夹

在public文件下创建一个html文件

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

在src下创建一个index.js（作为webpack的入口文件）

2.安装webpack, webpack-cli, webpack-dev-ser

yarn add webpack webpack-cli webpack-dev-server

// or

npm i webpack webpack-cli webpack-dev-server

3.更改pakage.json

{
  "name": "webpack_react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {}
}

4.安装以下必要的包

1. yarn add @bable/core @babel/cli @babel/preset-env @babel/preset-react babel-loader babel-polyfill

2. yarn add style-loader css-loader sass-loader less-loader node-sass

3. yarn add html-webpack-plugin

5.新增webpack配置文件webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: "development",
    entry: ['babel-polyfill','./src/index.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    plugins: [
        //html-webpack-plugin 以public下的index.html文件为模板在dist文件夹下自动生成index.html，并引入mian.js， 
        //可运行yarn build 查看dist文件夹下的内容
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html'
        })
    ],
    module: {
        rules: [
            {
                // 正则匹配.js || .jsx文件使用babel-loader 编译
                test: /\.jsx?$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                        require('@babel/preset-env'), 
                        require('@babel/preset-react')
                    ]}
                }
            },
            {
                // 正则匹配.css|| scss || less文件， 编译顺序是从下往上
                test: /\.(css|scss|less)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                    'less-loader'
                ]
            }
        ]
    }
}

6. 安装react相关包

yarn add react reac-dom

7.更改src下index.js文件，新增App.js, App.less/App.scss

// 项目打包的入口文件
import React from 'react'
import ReactDom from 'react-dom'

import App from './App'

ReactDom.render(<App />, document.getElementById('root'))

import React from 'react'
import './App.less'

class App extends React.Component{
    render() {
        return <p className="text">hello react</p>
    }
}
export default App