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

已于 2023-11-10 13:44:30 修改
阅读量1.4k 收藏 5
点赞数
分类专栏： 前端构建工具 文章标签： webpack react.js
于 2022-06-20 10:48:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37911706/article/details/125367663
版权

一、Webpack主要作用：

  1. 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
  2. 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
  3. 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
  4. 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
  5. 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
  6. 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
  7. 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

二、Webpack 有以下几个核心概念：

  1. Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
  2. Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
  3. Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
  4. Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
  5. Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。
  6. Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

三、用Webpack打包WebStorm创建的React项目

    1、安装Webpack和Webpack-cli

              npm  install  webpack  webpack-cli

    2、修改package.json文件中的build为webpack

 "scripts": {
  "start": "react-scripts start",
  "build": "webpack",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

     3、安装以下包

"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^5.2.7",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.0",
"less-loader": "^5.0.0",
"node-sass": "^4.14.1",
"sass-loader": "^5.0.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1"

指令如：

           npm  install  babel-loader@8.1.0

    注意：包的版本号(版本不匹配，打包会报错)

    4、在项目根目录下创建webpack.config.js文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: "development",
    entry: './src/index.js',  //入口配置

    output: {  //出口配置
        path: path.resolve(__dirname,'build'), //打包文件的输出路径
        filename: "bundle.js" //打包文件名
    },
    module: { //rules、loader
        rules: [{
            test: /\.js$/, //使用正则匹配所有需要使用babel-loader的文件
            use: {
                loader: "babel-loader", //指明要使用的loader
                options: {  //传入loader的参数
                    presets: ["@babel/env", "@babel/react"]
                }
            }
        },
            {
                test: /\.css$/, //使用正则表达式匹配所有需要使用此loader的文件
                use: [
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                test: /\.scss$/, //使用正则匹配所有需要使用此loader的文件
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ] //处理顺序依次是：sass-loader -> css-loader -> style-loader
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1024 * 30, //30KB以下的文件采用url-loader
                        fallback: 'file-loader', //否则采用file-loader，默认值是file-loader
                        outputPath: 'images' //图片输出路径,相当于output.path
                    }
                }]
            },
            {
                test: /\.(eot|ttf|woff|svg)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 1024 * 30,
                        fallback: 'file-loader',
                        outputPath: 'fonts'
                    }
                }]
            }
        ]
    },
    plugins: [ //插件
        new HtmlWebpackPlugin({
            template: './public/index.html', //指定模板路径
            filename: 'index.html' //指定文件名
        })
    ]
}

   5、配置详解：

       5.1、配置Babel：目前浏览器对ES6的标准支持不全，所以我们需要把ES6转换成ES5

rules: [{
       test: /\.js$/, //使用正则匹配所有需要使用babel-loader的文件
       use: {
          loader: "babel-loader", //指明要使用的loader
          options: {  //传入loader的参数
              presets: ["@babel/env", "@babel/react"]
          }
    }
}

      5.2、自动生成HTML：使用html-webpack-plugin 自动生成HTML，并引入相应文件。

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [ //插件
    new HtmlWebpackPlugin({
        template: './public/index.html', //指定模板路径
        filename: 'index.html' //指定文件名
    })
]

     5.3、加载CSS：webpack本身只认得JS文件，其他非JS文件需要用loader进行转换。处理css文件，需要用到以下两个loader：

  • css-loader 负责解析 CSS 代码，主要是为了处理 CSS 中的依赖，例如 @import 和 url() 等引用外部文件的声明。
  • style-loader 会将 css-loader 解析的结果转变成 JS 代码，运行时动态插入 style 标签来让 CSS 代码生效。
{
    test: /\.css$/, //使用正则表达式匹配所有需要使用此loader的文件
    use: [
        'style-loader',
        'css-loader',
    ]
}

       5.4、加载SCSS和less

{
    test: /\.scss$/, //使用正则匹配所有需要使用此loader的文件
    use: [
        'style-loader',
        'css-loader',
        'sass-loader'
    ] //处理顺序依次是：sass-loader -> css-loader -> style-loader
},
{
    test: /\.less$/,
    use: [
        'style-loader',
        'css-loader',
        'less-loader'
    ]
}

      5.5、加载图片&字体：file-loader, url-loader可用于处理图片，字体等静态资源。

url-loader封装了file-loader：

  • 文件大小小于limit参数时，url-loader将会把文件转为DataURL。
  • 文件大小大于limit，url-loader会调用file-loader进行处理。
{
            test:/\.(png|svg|jpg|gif)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 1024 * 30, //30KB以下的文件采用url-loader
                    fallback: 'file-loader', //默认值是file-loader
                    outputPath: 'images' //图片输出路径,相当于output.path
                }
            }]
        },
        {
            test: /\.(eot|ttf|woff|svg)$/,
            use: [{
                loader: "url-loader",
                options: {
                    limit: 1024 * 30,
                    fallback: 'file-loader',
                    outputPath: 'fonts'
                }
            }]
        }
    ]
}

   5.6、模式：在日常的前端开发工作中，一般都会有开发&生产两套构建环境。webpack 4.X新增用mode字段指定当前环境，并启用相应模式下的webpack内置的优化。

module.exports = {
    mode: "development",
}

选项

描述

development

 (开发环境)

process.env.NODE_ENV =development
并启用以下插件：
NamedChunksPlugin ， NamedModulesPlugin

production

 (生产环境)

process.env.NODE_ENV =production
并启用以下插件：
FlagDependencyUsagePlugin ， FlagIncludedChunksPlugin , ModuleConcatenationPlugin , NoEmitOnErrorsPlugin , OccurrenceOrderPlugin , SideEffectsFlagPlugin , UglifyJsPlugin

上庸者-不服周
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用Webpack搭建自己的React项目----1
qq_30483517的博客
04-09 547
使用Webpack搭建自己的React项目--持续更新创建项目基础代码配置webpack运行项目 React 和 Webpack在前端峡谷里可是两位扛耙子的基友了。他们相爱相杀。React官方已经为大伙提供了create-react-app开箱即用。如果是小项目或者是想自己折腾，就需要咱们(提供一块肥皂)提供基于react的webpack配置。废话不多说，下面的教程有眼睛就能学废会。 github...
从零开始搭建一个react项目开发
08-28
从零开始搭建一个React项目开发 本文主要介绍了从零开始搭建一个React项目开发的整个过程，从生成package.json文件到安装依赖项、配置Webpack、启动开发服务器等。下面是相关知识点的详细解释： 一、生成package....
React 使用webpack打包
一杯清泉
03-27 6048
一、项目创建 1、新建一个项目文件夹，打开终端，切换到到项目目录下： npm init -y 这时候使用webstorm等高级的编辑器打开项目执行下面步骤效果会更直观。 2、新建一个文件夹public，在文件夹内创建index.html文件，添加： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title
2024年最全从零开始，用Webpack构建React基础教程(1)，太棒了
最新发布
2401_84123265的博客
05-07 830
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】让我们开始吧项目结构====新建一个新项目，命名为ReactDemo，将项目目录组织如下：其中app是开发目录components用来放React的组件Component1.jsx是React特有的jsx文件main.js是入口文件，用来将React组件放在真正的Html中build是输出目录< head>< /head>< body>
webpack深入学习，搭建和优化react项目。
SaRAku的博客
05-26 1045
搭建和优化webpack的react项目 参考教程： https://www.jianshu.com/p/04e436cf75ba 遇到问题： 1、webpack-dev-server 成功启动无渲染 看看html内dom节点是否挂载JSX，是否引入了打包好的js资源。 使用HtmlWebpackPlugin会自动把生成的bundle.js文件引入html内。 通常来说，每个入口会生成本入口的依赖树图和chunk文件，一个入口对应一个chunk，而一个chunk对应一个Bundle，某个入口打包出来的b
React入门（十四）之webpack
qq_38256266的博客
09-23 942
umi官方文档 dva官方文档
Webpack搭建React开发环境
2303_79056168的博客
04-13 802
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**
React配置环境
吃蛋糕的居居
07-09 793
1.先下载node(用最稳定的版本) 2.全局安装：(第一次安装的时候需要用到) npm install webpack -g npm install webpack@^4.39.2 npm install --save-dev webpack-cli@^3.3.7 3.项目安装步骤： (1)创建站点(一个新的文件夹) (2)初始化项目文件：npm init (3)npm install webpack@^4.39.2 --save-dev (4)npm install webpac...
从零开始学习搭建React脚手架项目
10-18
在本文中，我们学习了如何从零开始搭建React脚手架项目。我们使用Create-React-App工具来搭建项目，然后配置了package.json文件和Webpack配置文件。这些配置文件对于我们的开发过程非常重要，可以帮助我们快速搭建一...
从零开始搭建webpack+react开发环境的详细步骤
08-27
从零开始搭建webpack+react开发环境的详细步骤 本资源主要介绍了从零开始搭建webpack+react开发环境的详细步骤，涵盖了webpack的安装、配置、loader的使用、插件的配置等内容。 一、环境依赖 在开始搭建webpack+...
基于Webpack4和React hooks搭建项目的方法
10-17
最后，使用create-react-app是一个快速搭建React应用的脚手架，但为了自定义配置，我们可以选择从零开始配置Webpack。这样可以更好地理解构建流程，并根据项目需求进行定制。 总结，基于Webpack4和React Hooks搭建...
React+Webpack+babel项目搭建
10-29
React+Webpack+Babel项目搭建，适合新入坑的同学们学习。
基于webpack4搭建的react项目框架的方法
12-10
介绍 框架介绍，使用webpac构建的react单页面应用，集成antd。使用webpack-dev-server启动本地服务，加入热更新便于开发调试。使用bundle-loader进行代码切割懒加载 手动搭建，不使用cli，大量注释适合初学者对webpack的理解学习，对react项目的深入了解 启动 git clone https://gitee.com/wjj0720/react-demo.git cd react-demo yarn yarn start 打包 yarn build 目录结构 +node_modules -src +asset +La
React 教程：如何使用 webpack 4 和 Babel 构建 React 应用(2018)
07-26
React 主要用于单页应用程序。 然而，你可以将 React 库集成到任何使用 webpack 和 Babel 构建的网站中
webpack,react不用脚手架创建项目
10-14
webpack,react不用脚手架创建项目,适合初学者，用vscode打开，npm install安装模块,npm run dev
前端构建之webpack+react 脚手架
09-22
前端构建之webpack+react 一个简单的脚手架
webpack5搭建react框架-基础环境配置
前端三脚猫的博客
03-15 1514
通过使用webpack5搭建基础react框架来学习webpack相关知识。
react 新建项目_webpack 搭建 react 项目
weixin_32309375的博客
01-31 215
webpack搭建react项目前言：现在比较火的前端框架有react和vue。对应的框架都有相应的脚手架可以快速搭建项目。这些脚手架使用的一个重要打包模块就是webpack。虽然脚手架使用方便，但是脚手架也有其弊端，比如就是脚手架搭建的项目会有很多用不到的模块，而且脚手架搭建的项目要按需更改配置就需要 eject 出 webpack 的配置，且这个过程是不可逆的。本文主要介绍自己实际使用webp...
Webpack搭建React项目
乔木的博客
06-03 232
Webpack搭建React项目 先创建一个myapp的文件夹，然后运行cmd 第一步 安装模块 初始化，生成package.json npm init -y 安装react模块 我这选择的版本是 16.13.1 #安装react npm install react@16.13.1 --save #安装react-dom cnpm install react-dom@16.13.1 --save 安装webpack工具 #安装webpack和webpack-cli npm install webpack
如何从零搭建一个react + TS的完整项目
05-31
搭建 React + TypeScript 项目的步骤如下： 1. 创建一个新的项目文件夹 ``` mkdir my-react-ts-app cd my-react-ts-app ``` 2. 初始化项目 ``` npm init -y ``` 3. 安装必要的依赖 ``` npm install --save react react-dom npm install --save-dev typescript @types/react @types/react-dom webpack webpack-cli webpack-dev-server awesome-typescript-loader html-webpack-plugin ``` 4. 创建一个 TypeScript 配置文件 ``` touch tsconfig.json ``` 5. 将以下内容添加到 tsconfig.json 文件中 ``` { "compilerOptions": { "outDir": "./dist/", "module": "es6", "target": "es5", "lib": ["es6", "dom"], "sourceMap": true, "jsx": "react", "moduleResolution": "node", "esModuleInterop": true }, "include": [ "./src/**/*" ] } ``` 6. 添加一个 index.html 文件到项目根目录 7. 添加以下内容到 index.html 文件中 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My React TypeScript App</title> </head> <body> <div id="root"></div> </body> </html> ``` 8. 创建一个 src 目录 ``` mkdir src ``` 9. 在 src 目录中创建一个 App.tsx 文件 ``` touch src/App.tsx ``` 10. 将以下内容添加到 App.tsx 文件中 ```tsx import React from 'react'; const App = () => { return ( <div> <h1>Hello, World!</h1> </div> ); }; export default App; ``` 11. 在 src 目录中创建一个 index.tsx 文件 ``` touch src/index.tsx ``` 12. 将以下内容添加到 index.tsx 文件中 ```tsx import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); ``` 13. 在项目根目录中创建一个 webpack.config.js 文件 ``` touch webpack.config.js ``` 14. 将以下内容添加到 webpack.config.js 文件中 ```js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.tsx', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'], }, module: { rules: [ { test: /\.tsx?$/, loader: 'awesome-typescript-loader', }, ], }, plugins: [ new HtmlWebpackPlugin({ template: 'index.html', }), ], devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 3000, }, }; ``` 15. 运行 npm start 启动项目 ``` npm start ``` 以上就是从零搭建一个 React + TypeScript 的完整项目的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

上庸者-不服周

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值