前端整合webpack-react

最新推荐文章于 2024-08-21 18:34:12 发布

12345sdfad

最新推荐文章于 2024-08-21 18:34:12 发布

阅读量82

点赞数

分类专栏：前端文章标签： react.js node.js javascript

本文链接：https://blog.csdn.net/clyss1234/article/details/120264251

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Webpack环境下配置React项目，包括安装必要的插件如React、Redux等，配置babel处理ES6+语法，以及使用各种loader处理CSS、less和图片资源。最后展示了如何编写和测试React组件与HTML结构。

摘要由CSDN通过智能技术生成

文章目录

webpack + react

webpack + react

安装react插件

npm install -s react react-dom react-router redux

安装各种编译用插件

# @babel/core —— babel核心库
# @babel/preset-env  @babel/plugin-transform-runtime —— 将es6,es7语法转换成es5
# @babel/preset-react —— 将react语法转换为 es5
# @babel/runtime —— 模拟一个ES2015的环境，只在引入模块中起作用
npm install -d @babel/core  @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/runtime

# babel-loader	—— 使用babel编译项目
# css-loader 	—— 编译css文件
# style-loader 	—— 编译css文件
# url-loader	—— 引入路径（图片，字体）
# file-loader 	—— 引入文件（图片，字体）
# less 			—— 识别less文件
# less-loader 	—— 编译less文件
npm install -s babel-loader css-loader file-loader less less-loader style-loader url-loader

添加打包构建规则

// 在配置文件的module下添加rules属性
rules:[
    {
        test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx文件（必须）
        exclude: /node_modules/,//屏蔽不需要处理的文件（文件夹）（可选）
        loader: 'babel-loader',//loader的名称（必须）
    },
    {
        test: /\.css$/,
        use:[
            { loader: 'style-loader' }, // 创建 <style></style>,
            { loader: 'css-loader' },  // 转换css
        ]
    },
    {
        test: /\.less$/,
        use: [
            {loader: 'style-loader', },
            {loader: 'css-loader',},
            {loader: 'less-loader'}, // 编译 Less -> CSS
        ],
    },
    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
            /* url-loader 包含file-loader，这里不用file-loader, 
            小于10000B的图片base64的方式引入，大于10000B的图片以路径的方式导入 */
            limit: 10000,
            name: 'static/img/[name].[hash:7].[ext]'
        }
    },
    {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
            limit: 10000, // 小于10000B的图片base64的方式引入，大于10000B的图片以路径的方式导入
            name: 'static/fonts/[name].[hash:7].[ext]'
        }
    }
]

编写页面文件测试

// index.js
import React from 'react'
import ReactDom from 'react-dom'

class App extends React.Component {
  render() {
    return (
      <div style={{ color: "#333" }} className="test test2">
        <input />
      </div>
    )
  }
}
ReactDom.render(<App />, document.getElementById('app'))

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react demo</title>
</head>

<body>
    <div id="app">

    </div>
</body>

</html>