webpack配置+手动搭建react环境

最新推荐文章于 2024-08-21 18:34:12 发布
最新推荐文章于 2024-08-21 18:34:12 发布
阅读量289 收藏
点赞数 1
文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46374053/article/details/106296726
版权

webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

一、安装

1、全局安装
npm i webpack -g
npm i webpack-cli -g

查看全局的webpack版本

webpack --version
2、局部安装

在创建好的空文件夹中，先初始化

npm init -y

再开始安装

npm i webpack -D
npm i webpack-cli -D

以上安装成功完成后会出现下面图片所示的文件：
在这里插入图片描述
查看项目内的webpack版本，需在package.json文件中配置：
在这里插入图片描述
启动，查看项目内版本

npm run version

二、默认文件

1、默认入口文件

src/index.js
创建 src文件夹，src下创建webpack打包入口文件 index.js；
在这里插入图片描述

1、默认出口文件

dist/main.js
创建 dist文件夹，dist下创建webpack打包入口文件 main.js；
在这里插入图片描述
创建webpack.config.js文件，并编写配置文件：
在这里插入图片描述
代码如下：

const path = require("path");   // Node 自带的模块 无需安装 
const webpack = require("webpack");
module.exports = {
    entry:["./src/index.js"],  // 入口文件 
    output:{
        path:path.resolve(__dirname,"dist"),  // resolve 正确处理 
        filename:"[name].[hash:8].js",  // [name=main] 哈希加密算法得到 长度为8 随机字符串  不可能重名
        publicPath:"",  // 公共路径  打包设置  相对路径 
    },
    mode: "development",          // webpack模式
}

三、修改package.json配置

在这里插入图片描述
在script中添加如下代码:
注：-w为开启监听，只要修改文件或添加配置，保存后自动打包文件；

    "build": "webpack -w"

执行代码：

    npm run build

就可以将src/index.js文件打包出来，并在dist文件夹中可以看见打包好的文件；但是现在会出现一个问题，每保存一次就会产生一个新的JS文件，如果只需要保留最新打包的文件可以安装如下插件：

    npm i clean-webpack-plugin -D

webpack.config.js配置
在这里插入图片描述
代码如下：

const {CleanWebpackPlugin} = require("clean-webpack-plugin");
module.exports = {
    plugins:[
        new CleanWebpackPlugin(),   // 清理之前的打包文件
    ]
}

四、使用HTML模板及抽离样式

1、HTML模板

使用 html-webpack-plugin 插件，webpack 会根据你的配置生成你想要的文件 html，首先安装插件：

npm i html-webpack-plugin -D

然后在webpack.config.js文件中配置：
在这里插入图片描述
代码如下：

const htmlWebpackPlugin = require("html-webpack-plugin"); //  打包处理html;
module.exports = {
    plugins:[       
   		new htmlWebpackPlugin({
        	template:"./public/index.html",  // 打包形成的HTML文件，以./public/index.html为模板，自动引入打包的JS
        	inject:true,   // inject 注入  自动引入打包好的 所有(css/js)文件 
        }),
    ]
}

重新启动后，dist文件夹中会出现一个html文件：
在这里插入图片描述

2、抽离样式

安装插件：

npm i extract-text-webpack-plugin -D

webpack.config.js文件中配置：
在这里插入图片描述
代码如下：

const extractTextWebpackPlugin = require("extract-text-webpack-plugin");   // 抽离样式
module.exports = {
    module:{  // 模块打包规则定义
        rules:[  // 匹配规则
            {   //抽离样式
                test:/\.(css|scss|sass)$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader", // 把样式代码转为js字符串的样式代码
                    use:[
                        "css-loader", // 转为 commonJs规范的模块 
                        {
                            loader:"postcss-loader", // 处理css代码 
                            options:{
                                plugins:function(){
                                    return [
                                        require("cssgrace"), // 代码美化 换行 
                                        require("autoprefixer"), // 自动补全  moz ms webkit
                                        require("postcss-px2rem-exclude")(
                                            {
                                                remUnit:37.5,
                                                exclude:/antd/gi,
                                            }
                                        )
                                    ]
                                }
                            }
                        },
                        "sass-loader"  // 编译 sass 为 css 代码
                    ]
                })
            },
            {
                test:/\.(css|less)$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader", // 把样式代码转为js字符串的样式代码
                    use:[
                        "css-loader", // 转为 commonJs规范的模块 
                        {
                            loader:"postcss-loader", // 处理css代码 
                            options:{
                                plugins:function(){
                                    return [
                                        require("cssgrace"), // 代码美化 换行 
                                        require("autoprefixer"), // 自动补全  moz ms webkit
                                        require("postcss-px2rem-exclude")(
                                            {
                                                remUnit:37.5,
                                                exclude:/antd/gi,
                                            }
                                        )
                                    ]
                                }
                            }
                        },
                        "less-loader"
                    ]
                })
            }
        ]
    },
}
3、图片打包

安装插件：

npm i url-loader file-loader -D

webpack.config.js文件中配置：
在这里插入图片描述
代码如下：

module:{  // 模块打包规则定义
        rules:[  // 匹配规则
            {   //打包图片 
                test:/\.(png|jpg|gif|svg|woff|woff2|eot|ttf)$/,
                use:{
                    loader:"url-loader",
                    options:{
                        limit:8192, // 图片最大 8M
                        name:"imgs/[name].[hash:8].[ext]"  //ext 后缀名 
                    }
                }
            }
         ]
}

五、开发服务器

安装插件：

npm i webpack-dev-server -D

webpack.config.js文件中配置：
在这里插入图片描述
代码如下：

const path = require("path");   // Node 自带的模块 无需安装 
const webpack = require("webpack");
module.exports = {
    devServer:{  // 开发环境的服务器配置  设置代理 
        compress:true,
        hot:true,
        inline:true,
        port:7000,   // 端口
        open:true,   // 自动打开浏览器 
        publicPath:"",
        proxy:{    // 代理配置
            "/yun":{
                target:"http://47.104.209.44:3333/",  // 服务器地址  
                changeOrigin: true,
                pathRewrite:{
                    "^/yun":""  // 需要将 /yun 重写为 / 
                }
            },
        }
    },
}

package.json文件配置，以便启动服务器：
在这里插入图片描述
启动服务器，执行：

npm run server

六、引入 babel-loader 来编译 es6以及react

1、babel-loader插件

安装插件：

npm i @babel/core babel-loader @babel/preset-env -D

webpack.config.js文件中配置：
在这里插入图片描述
代码如下：

const path = require("path");   // Node 自带的模块 无需安装 
const webpack = require("webpack");
module.exports = {
    module:{  // 模块打包规则定义
        rules:[  // 匹配规则
            {   //配置babel  babel-loader @babel/core @babel/preset-env
                test: /\.js$/,
                exclude: /(node_modules)/,  //排除node_modules
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
            }
        ]
}
2、react插件

安装插件：

npm i react react-dom @babel/preset-react -D

webpack.config.js文件中配置：
在这里插入图片描述
代码如下：

const path = require("path");   // Node 自带的模块 无需安装 
const webpack = require("webpack");
module.exports = {
    module:{  // 模块打包规则定义
        rules:[  // 匹配规则
            {   //配置babel  babel-loader @babel/core @babel/preset-env
                //配置react  react react-dom @babel/preset-react
                test: /\.js$/,
                exclude: /(node_modules)/,  //排除node_modules
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env','@babel/preset-react']
                  }
                }
            }
        ]
}

七、webpack.config.js配置文件完整代码

const path = require("path");   // Node 自带的模块 无需安装 
const webpack = require("webpack");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");  // 打包处理html;
const extractTextWebpackPlugin = require("extract-text-webpack-plugin");   // 抽离样式

module.exports = {
    entry:["./src/index.js"],  // 入口文件 
    output:{
        path:path.resolve(__dirname,"dist"),  // resolve 正确处理 
        filename:"[name].[hash:8].js",  // [name=main] 哈希加密算法得到 长度为8 随机字符串  不可能重名
        publicPath:"",  // 公共路径  打包设置  相对路径 
    },
    mode: "development",          // webpack模式
    plugins:[
        new CleanWebpackPlugin(),   // 清理之前的打包文件
        new htmlWebpackPlugin({
            template:"./public/index.html",  // 打包形成的HTML文件，以./public/index.html为模板，自动引入打包的JS
            inject:true,   // inject 注入  自动引入打包好的 所有(css/js)文件 
        }),
    ],
    module:{  // 模块打包规则定义
        rules:[  // 匹配规则
            {   //打包图片 
                test:/\.(png|jpg|gif|svg|woff|woff2|eot|ttf)$/,
                use:{
                    loader:"url-loader",
                    options:{
                        limit:8192, // 图片最大 8M
                        name:"imgs/[name].[hash:8].[ext]"  //ext 后缀名 
                    }
                }
            },
            {   //抽离样式
                test:/\.(css|scss|sass)$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader", // 把样式代码转为js字符串的样式代码
                    use:[
                        "css-loader", // 转为 commonJs规范的模块 
                        {
                            loader:"postcss-loader", // 处理css代码 
                            options:{
                                plugins:function(){
                                    return [
                                        require("cssgrace"), // 代码美化 换行 
                                        require("autoprefixer"), // 自动补全  moz ms webkit
                                        require("postcss-px2rem-exclude")(
                                            {
                                                remUnit:37.5,
                                                exclude:/antd/gi,
                                            }
                                        )
                                    ]
                                }
                            }
                        },
                        "sass-loader"  // 编译 sass 为 css 代码
                    ]
                })
            },
            {
                test:/\.(css|less)$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader", // 把样式代码转为js字符串的样式代码
                    use:[
                        "css-loader", // 转为 commonJs规范的模块 
                        {
                            loader:"postcss-loader", // 处理css代码 
                            options:{
                                plugins:function(){
                                    return [
                                        require("cssgrace"), // 代码美化 换行 
                                        require("autoprefixer"), // 自动补全  moz ms webkit
                                        require("postcss-px2rem-exclude")(
                                            {
                                                remUnit:37.5,
                                                exclude:/antd/gi,
                                            }
                                        )
                                    ]
                                }
                            }
                        },
                        "less-loader"
                    ]
                })
            },
            {   //配置babel  babel-loader @babel/core @babel/preset-env
                //配置react  react react-dom @babel/preset-react
                test: /\.js$/,
                exclude: /(node_modules)/,  //排除node_modules
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env','@babel/preset-react']
                  }
                }
              }
        ]
    },
    devServer:{  // 开发环境的服务器配置  设置代理 
        compress:true,
        hot:true,
        inline:true,
        port:7000,   // 端口
        open:true,   // 自动打开浏览器 
        publicPath:"",
        proxy:{    // 代理配置
            "/yun":{
                target:"http://47.104.209.44:3333/",  // 服务器地址  
                changeOrigin: true,
                pathRewrite:{
                    "^/yun":""  // 需要将 /yun 重写为 / 
                }
            },
        }
    },
}
조국화
关注
手动搭建 webpack + react 框架
手心守贝
10-31 1871
手动搭建 webpack + react 框架 准备 创建空项目文件夹。 建议安装cnpm，下文所有npm可以用cnpm代替 npm install -g cnpm --registry=https://registry.npm.taobao.org 初始化 npm 环境 npm init 一路回车即可 依赖安装 npm i webpack -D npm i webpack-cl...
#Webpack搭建React开发环境
xxtxa的博客
10-26 678
Webpack搭建React开发环境 1、React环境搭建 实现React开发的三种方式： （1）使用CDN的方式 <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 生产环境中
从0到1使用webpack搭建react脚手架
最新发布
zyf_baby的博客
08-21 1103
好多前端童鞋工作多年依然不会使用webpack搭建react脚手架，本文就介绍下如何从零开始搭建一个属于你自己的前端脚手架，提高自己的工程化实力，同时也提高团队的开发效率。
webpack手动配置react环境
qq_41801117的博客
08-22 260
通常我们会用脚手架create-react-app去创建react项目，但是，为了更加深入理解webpack打包工具以及react的相关知识，我们可以尝试自己配置webpack来实现react项目的搭建。 起步 我们首先创建一个初始化项目，然后生成一个package.json文件 npm init -y 这里给出我自己的package.json具体内容，方便大家不用遇见版本兼容的问题(因为我自己遇过，所以希望大家可以少走弯路) { "name": "todolist", "version": "1
使用 webpack 搭建 React 项目
weixin_33937913的博客
08-07 202
2019独角兽企业重金招聘Python工程师标准>>> ...
手动使用Webpack搭建react项目---1
Yetian_2000的博客
06-14 462
前言：本文只是本人使用webpack搭建基础react项目的的记录，仅供参考。 第一步：首先请确保node、npm已安装 。 可以在控制台通过输入：node -v //回车 <查看出现node版本，则安装成功> 可以在控制台通过输入：npm -v //回车 <查看出现npm 版本，则安装成功> 第二步：创建项目文件夹并初始化 在你想要搭建项目的位置建一个项目根目录，然后启动控制台，并调到新建的项目的根目录文件夹下，控制台中输入：npm init -y //回车 <此时
详解Webpack+Babel+React开发环境的搭建的方法步骤
08-28
至此，一个基本的Webpack+Babel+React开发环境已经搭建完成。开发者可以在这个环境中编写React组件，Webpack会自动处理模块和语法转换，Babel则负责将新语法转换为兼容旧环境的代码。这个环境为前端开发提供了一套...
webpack入门+react环境配置
12-10
《webpack入门+React环境配置详解》 在前端开发中，模块化管理和自动化打包工具的使用已经成为常态，而webpack正是这样一款强大的工具。本文旨在为React的开发环境搭建打下基础，帮助开发者理解webpack的基本概念和...
React+webpack+redux+ant design+axios+less全家桶后台管理框架.zip
06-12
React+webpack+redux+ant design+axios+less 这个组合是现代前端开发中的常见技术栈，用于构建高效、可维护的后台管理框架。以下是对这些技术及其在项目中的应用的详细说明： **React.js** React是Facebook开发的一...
React+Webpack4.0+ES6+Antd最新版环境搭建代码-2018年
08-24
3. **安装Webpack 4**：尽管`create-react-app`已经集成了Webpack，但为了手动配置，可以执行以下步骤： - 移除`node_modules`文件夹和`package-lock.json`。 - 在`package.json`中添加Webpack和相关插件、loader...
从0到1使用 Webpack5 + React + TS 构建标准化应用
阿里云技术
09-07 556
本篇文章主要讲解如何从一个空目录开始，建立起一个基于webpack + react + typescript的标准化前端应用。
webpack-react
cst_code的博客
06-25 600
react+webpack
手动搭建webpack4.X React项目脚手架
weixin_43990363的博客
06-19 220
记录一次自己搭建webpack4.43.0 React项目脚手架的过程 之前在网上跟着一位老师搭建过一次，不过只是跟着老师敲了一下，并没有理解每一步为什么要这么做，后面有一段时间没有练习就忘了，想重新写一个webpack打包的react项目的时候，自己又重新搭了一次，过程过踩了一些坑，写篇博客记录一下 由于速度原因，整个脚手架均使用cnpm安装 一、整体的流程 文件夹初始化 首先新建文件夹，后初始化项目文件夹，自动创建出一个包管理配置文件package.json，之后我们安装的相关的包都会在这个配置文件
react webpack.config.js 入门学习
weixin_34080951的博客
11-23 320
在学习react 的时候必然会用到webpack打包工具，webpack的快速入门另外一篇文章中有记录，这里只记录webpack.config.js文件，因为每个项目下都必须配置，通俗的讲，它的作用就是告诉Webpack要做什么。 一个最简单的Webpack配置文件webpack.config.js如下所示： module.exports = { entry:[ './app/mai...
React 使用webpack打包
一杯清泉
03-27 6144
一、项目创建 1、新建一个项目文件夹，打开终端，切换到到项目目录下： npm init -y 这时候使用webstorm等高级的编辑器打开项目执行下面步骤效果会更直观。 2、新建一个文件夹public，在文件夹内创建index.html文件，添加： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title
webpack-搭建React
莫莫
07-20 142
webpack搭建Reactwebpack搭建React安装webpack配置React再webpack配置文件中配置关于react的规则创建关于react的配置文件`.babelrc`创建React---小案例导入React以及React-Dom创建React的App组件调用JS压缩安装配置webpack文件的压缩插件出错时显示错误地址使用代码分割---splitChunks--简单了解动态加载可以写在事件中环境变量关于目录配置文件配置入口文件 webpack搭建React 安装 babel-load
【教程】Webpack搭建React开发环境详细步骤
柯晓楠
02-26 820
1. 安装Node.js Webpack实际是用Node.js写的，所以要先安装Node.js环境。而且Node.js中集成了NPM包管理，我们在后面用到的很多模块都需要使用NPM下载。 首先进入Node.js的官网，选择对应系统下载安装包，对于 windows 用户，直接下载安装包安装即可，如果是 Macos 用户，推荐使用 brew 进行安装。Node.js有很多版本，包括稳定版和开发版，不同...
Webpack搭建React项目
乔木的博客
06-03 239
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
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值