使用webpack构建react项目

最新推荐文章于 2024-05-07 03:35:08 发布
最新推荐文章于 2024-05-07 03:35:08 发布
阅读量447 收藏
点赞数
分类专栏： react 文章标签： reactjs webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leo_xian/article/details/104001621
版权

开始前

webpack：一个前端资源加载/打包工具
项目中需要处理的文件一般会使用的插件：

  • html: html-webpack-plugin (把html单独打包成文件，把对应的脚本和样式插入到合适的位置)、html-loader
  • 脚本： babel+babel-preset-react (解析ES6,JSX)
  • 样式：css-loader+sass-loader
  • 图片、字体： url-loader+file-loader
  • extract-text-webpack-plugin：把样式提取出来，打包成单独文件
  • CommonChunkPlugin：webpack自带，提取通用模块
  • webpack-dev-server：为webpack项目提供web服务，监听文件改动自动刷新，路径代理转发。

环境准备

node、cnpm/yarn，创建一个react-test（随便起）空目录存放项目文件

初始化工程，创建pakage.json

	cd react-test
	npm init

安装webpack

	npm install webpack webpack-cli --save-dev（请安装webpack v3的版本，最新v4有些插件不兼容，会出现坑）

–save-dev与–save的区别

  • –save-dev: 打包的时候不会打包到源码中去，就是说是在开发的时候使用到。例如webpack，babel等
  • –save ： 安装代码允许必须的库，发布时需要依赖的包，例如react，react-route-dom

新建和配置webpack

在react-test目录创建webpack.config.js文件：

mkdir webpack.config.js

写入相关配置

const path = require('path');

module.exports = {
    entry: './src/app.jsx',  //入口文件
    output: {  //输出文件
        // path:生成的文件要放在哪个位置
        // __dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录
        path: path.resolve(__dirname, 'dist'),  
        filename: 'js/app.js' // 生成文件的名称
    }
}
因为我这里webpack不是全局安装的，所以可以在控制台直接通过 .\node_modules\.bin\webpack 命令来运行打包。
打包成功后就可以在根目录看到一个dist文件，里面包含新生产的js文件。

配置web服务器

  1. 不再使用.\node_modules.bin\webpack打包，安装webpack-dev-server
  • npm install webpack-dev-server --save-dev
  • 配置devServer
//webpack.config.js
module.exports = {
    entry: './src/app.jsx',  //入口文件
    output: {  //输出文件
        // path:生成的文件要放在哪个位置
        // __dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录
        path: path.resolve(__dirname, 'dist'),  
        filename: 'js/app.js' // 生成文件的名称
    },
    devServer:{
		port: 8086
	}
}

//package.json
"scripts": {
    "dev": "node_modules/.bin/webpack-dev-server"
  },

接着，就可以在控制台输入 npm run dev  运行项目，地址：http://localhost:8086

安装babel和react

接下来代码中会用到ES6的语法和jsx，所以先把babel和react装上

	npm insatll react react-dom react-router-dom --save
	npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

在安装成功后必须进行babel的配置，在根目录react-test建立.babelrc文件，然后写入以下配置

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

接着，在webpack.config.js 的module中添加rules规则

	module:{
		rules:[
			{
	            test: /\.(js|jsx)$/,
	            exclude: /(node_modules)/,  //排除node_modules
	            use: {
	              loader: 'babel-loader',
	            }
          }
		]
	}

安装其他需要的插件

  1. 首先，现在src目录下创建app.jsx、index.html。
    index.html结构:在这里插入图片描述
    app.jsx：
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
    render(){
        return <p>测试的组件</p>
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
)
  1. 处理html
    安装html-webpack-plugin和html-loader
npm install html-webpack-plugin html-loader --save-dev

配置规则：

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

module.exports = {
    entry: './src/app.jsx',  //入口文件
    output: {  //输出文件
        //path:生成的文件要放在哪个位置 __dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录
        path: path.resolve(__dirname, 'dist'),  
        filename: 'js/app.js' // 生成文件的名称
    },
    module:{
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                use: {
                  loader: 'babel-loader',
                }
            },
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader'
                }
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        })
    ]
}
  1. 处理样式
    安装css-loader，style-loader，sass-loader
npm install style-loader css-loader --save-dev
npm install sass-loader node-sass --save-dev

配置规则，把代码放到rules里面：

{
    test: /\.css$/,
    use: [ 'style-loader', 'css-loader' ]
},
{
    test: /\.scss$/,
    use: [{
        loader: "style-loader" // 将 JS 字符串生成为 style 节点
    }, {
        loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
    }, {
        loader: "sass-loader" // 将 Sass 编译成 CSS
    }]
},

我们可以在src目录下创建一个index.scss，style.css，并且写上样式。接着在app.jsx文件中引入
import './style.css';
import './index.scss';

// index.scss的样式
p{
    font-size:30px;
    color: red;
}

//style.css的样式
body{
    padding:0;
    margin:0;
    background-color: pink;
}
最后运行 npm run dev打包

打开http://localhost:8086，就可以看到效果了，eg:
在这里插入图片描述
4. 但是我们现在打包的css是包含在打包后的dist/js/app.js文件里面的，所以我们要把它抽取出来。使用到的是extract-text-webpack-plugin插件

  • 安装和配置extract-text-webpack-plugin
  • npm install extract-text-webpack-plugin --save-dev
  • 在安装这里遇到了一个坑。因为我之前安装的是webpack v4的版本。安装的extract-text-webpack-plugin插件又不是最新的，所以打包出错，提示：Tapable.plugin is deprecated. Use new API on .hooks instead 。
  • 解决方法 : 卸载之前安装的extract-text-webpack-plugin插件。重新安装最新的extract-text-webpack-plugin插件：·npm install extract-text-webpack-plugin@next --save-dev；或者直接安装webpack v3的版本
  • 配置，具体可参照webpack官网上的用法：https://www.webpackjs.com/plugins/extract-text-webpack-plugin/
// 1、引入extract-text-webpack-plugin
const ExtractTextPlugin = require('extrack-text-webpack-plugin');

// 2、在plugin中创建ExtractTextPlugin实例
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',
    }),
    new ExtractTextPlugin("css/[name].css")  //提取css
]

// 3、修改之前的css，scss规则
{
   test: /\.css$/,
   use: ExtractTextPlugin.extract({
       fallback: "style-loader",
       use: "css-loader"
     })
 },
 {
   test: /\.scss$/,
   use: ExtractTextPlugin.extract({
     fallback: 'style-loader',
     use: ['css-loader', 'sass-loader']
   })
 },
  1. 顺便把js的公共代码提取出来，因为我这里用的是webpack4， CommonChunkPlugin已被弃用，改用SplitChunksPlugin，详细可以查看webpack文档。我这里也把CommonChunkPlugin的方法写出来。
const webpack =  require('webpack');
//CommonChunkPlugin：在plugin中创建实例
plugins: [
	   //处理html文件
	   new HtmlWebpackPlugin({
	       template: 'src/index.html'
	   }),
	   //独立css文件
	   new ExtractTextPlugin("css/[name].css"),
	   //提出公共模块
	   new webpack.optimize.CommonsChunkPlugin({
	     name: 'common',
	     filename: 'js/base.js'
	   })
],

//SplitChunksPlugin：
optimization:{
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: "vendor",
                    test: /[\\/]node_modules[\\/]/, //打包第三方库
                    chunks: "all",
                    priority: 10 // 优先级
                },
                commons: { // 打包其余的的公共代码
                    name: "commons",  // 分离包的名字
                    chunks: "initial",
                    minChunks: 2 // 引入两次及以上被打包
                }
            }
        }
    }
  1. 处理静态文件
  • 安装file-loader和url-loader
  • npm install file-loader url-loader --save-dev
  • 因为编译后文件是在dist中，所以要修改一下output，可以自动更新内嵌的url值
output: {  
        path: path.resolve(__dirname, 'dist'),  
        publicPath: '/dist/',   //指定资源文件引用的目录
        filename: 'js/app.js'
    },
  • 配置rules
{
  test: /\.(png|jpg|gif)$/i,
  use: [
      {
          loader: 'url-loader', //使用
          options: {
              limit: 8192,
              name: 'resource/[name].[ext]'
          },
      },
  ],  
},
  1. 配置别名
  • 在写代码的时候，我们需要引入不同文件夹下的组件。引入的路径会写的比较长，为了减少路径的复杂度，我们可以在webpack中配置别名
module.exports = {
	........
	resolve:{
	    alias:{
	        page: path.resolve(__dirname, 'src/page')
	    }
	},
}

// 使用：
import Test from 'page/home/index.jsx'

结束

关于react的webpack配置还有很多，例如代理，配置字体规则等等，在实际的项目中按需要去添加。
大家一起学习进步，加油！

童年的纸飞鸡~
关注
专栏目录
webpack4.0+react16.0+es6简单环境搭建与配置
yaomengzhi的博客
03-31 4361
webpack参考文档：https://www.valentinog.com/blog/webpack-4-tutorial/react:参考文档：https://reactjs.org/docs/add-react-to-a-new-app.htmles6参考文档：http://www.ruanyifeng.com/blog/2017/09/es6_primer_3rd_edition.html...
从零开始，用Webpack构建React基础教程
2401_83916394的博客
03-29 931
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往获取自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
webpack构建react应用
柒月
06-19 210
一、新建一个文件夹。 mkdir webpack-react-demo 二、在此文件夹下创建package.json文件 右键新建文件也行。这里使用 npm init 初始化项目的方式自动生成。 在webpack-react-demo文件夹下进入CMD命令行，输入npm init，一路enter就行。 三、安装相关的依赖包 react相关： react 、react-dom babel相关：...
用 Webpack 构建一个最基础的 React 项目
weixin_44533000的博客
04-09 148
用 Webpack 构建一个最基础的 React 项目 创建项目 步骤： 新建文件夹，例如：webpack-react 初始化项目 在 CMD 中进入项目文件夹，然后运行yarn init -y 也可以使用npm init -y 安装各种依赖，比如处理 JSX，CSS 的各种 loader，和一些插件。这里推荐在写配置或者需要用到时再安装，否则有依赖出问题时不好排查 开始创建项目中的目录和文件 编写 Webpack 配置文件 运行项目 项目结构 项目名称：webpack-react ├─packa
webpack构建react项目----实战篇
keep789的博客
09-04 381
可以用脚手架搭建react环境，比较快一点；但实际开发，公司常需要不使用现有的方法来搭建，这时候就需要自己去使用webpack自动化构建工具来搭建react项目的环境了。以下是简单的搭建步骤： 1.创建目录，项目名为wpro   2.项目初始化      npm init 3.安装webpack依赖    npm i webpack     webpack-cli     webpack-de...
基于Webpack搭建React开发环境
前端小白成长记
06-21 1959
1.创建项目文件夹 mkdir study-demo cd study-demo 2.并初始化package.json npm init 运行 npm init 下方询问的问题，可以enter采用默认的选项 （默认配置可以直接使用 npm init -y） 文件夹内出现新的package.json文件（我就是自己输入了description后面的值，其他的都是使用默认的值） 3...
cesium使用webpack搭建react项目
10-08
在这个过程中，我们利用Webpack进行模块管理和打包，使用Babel将ES6+代码转换为浏览器兼容的JavaScript，同时结合React的组件化思想，将Cesium与React结合，实现了在React项目中无缝使用Cesium的功能。这样的项目...
webpack配合react
12-21
React 作为一款流行的JavaScript库，用于构建用户界面，与Webpack结合使用可以实现项目的高效构建和部署。接下来，我们将深入探讨如何使用Webpack来构建一个React项目，以及其中涉及的关键知识点。 ### 1. Webpack ...
react_webpack_demo:使用Webpack构建React应用程序
04-27
通过以上步骤，我们可以成功地使用Webpack构建React应用程序。实际项目中，可能还会涉及更多细节，如处理静态资源、集成CSS预处理器、错误捕获等。不断学习和实践，将使你更加熟练地驾驭这两个强大的工具，构建出高...
2024年前端最全从零开始，用Webpack构建React基础教程，web开发项目
2401_84435555的博客
05-06 1057
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】| devtool选项 | 配置结果 || — | — |
webpack构建React应用一：创建项目
weixin_30457551的博客
07-11 98
前言 我们学习react、angular、vue等前端框架的时候，都需要用到webpack、grunt、gulp等构建工具来构建整个项目，至于为什么用webpack,因为>>笔者只接触过webpack。 笔者在学习react的时候，webpack构建这块卡在那里让我研究了挺久的，各种百度、查资料。为了避免今后犯下同样的错误，记录下构建项目的>每个步...
基于webpack的React项目搭建(一)
weixin_34088598的博客
12-23 150
前言 工欲善其事，必先利其器。为了更好的学习React，我们先简要的把开发环境搭建起来。本文主要介绍使用webpack搭建React项目，如果你对React或es6的基础语法还不了解，建议先去学习学习。 注 鉴于文章发布到现在已有一年之久，很多库版本也发生了很多变化，也导致了很多新手搭建出现许多问题。最近已将旧版本全面升级，项目架构也有所调整，开发环境保留了node启动和web...
从零开始，教你用Webpack构建React基础工程
hjh200507609的专栏
09-26 1063
转自http://www.jianshu.com/p/4df92c335617 其他参考： http://lib.csdn.net/article/24/41556?knId=689 http://www.ruanyifeng.com/blog/2015/03/react.html http://www.cnblogs.com/marymei0107/p/6118524.h
基于webpack的react脚手架
weixin_34253539的博客
10-19 57
一、前言：react的cli开发模式太过于简单，好多东西都要自己配置 二、这里有个简单的配置，可以直接上手开发(不熟悉webpack和npm的绕路)，已经完成的配置如下 1：默认ejs模板 2：编译less、scss 3：热更新 4：抽离压缩CSS、js 5：打包后chunkhash模式的版本号 6：提取公用第三方JS库 7：图片base64处理 8：本机IP地址打开，便于手机测...
Webpack搭建React开发环境
最新发布
2401_84097678的博客
05-07 772
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Webpack构建React基础工程
小牛牛的博客
02-13 413
安装 webpack在此之前你应该已经安装了 node.js.npm install webpack -g 参数-g表示我们将全局(global)安装 webpack, 这样你就能使用 webpack 命令了.webpack 也有一个 web 服务器 webpack-dev-server, 我们也安装上npm install webpack-dev-server -g webpack 配置文件w
基于webpack构建一个React应用
Sherry's Blog
08-01 388
1，创建一个空白文件 React-music-player 2，使用npm init 创建一个package.json文件，并安装相关依赖 "dependencies": { "autoprefixer": "^9.0.2", "pubsub-js": "^1.6.0", "react": "^16.4.1", "reac
react 新建项目_webpack 搭建 react 项目
weixin_32309375的博客
01-31 227
webpack搭建react项目前言：现在比较火的前端框架有react和vue。对应的框架都有相应的脚手架可以快速搭建项目。这些脚手架使用的一个重要打包模块就是webpack。虽然脚手架使用方便，但是脚手架也有其弊端，比如就是脚手架搭建的项目会有很多用不到的模块，而且脚手架搭建的项目要按需更改配置就需要 eject 出 webpack 的配置，且这个过程是不可逆的。本文主要介绍自己实际使用webp...
webpack深入学习，搭建和优化react项目。
SaRAku的博客
05-26 1183
搭建和优化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
使用Yarn与Webpack构建React项目实战
Webpack的配置和使用是本文的重点，通过Webpack，开发者可以实现自动化构建，包括代码的编译、压缩、优化等步骤，为React+Node.js/Python的新博客项目提供了一个坚实的基础。在后续的开发历程中，作者计划分享项目的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值