webpack打包react项目步骤

1.在项目更目录下新建dist文件夹。

2.安装webpack:

cnpm i webpack webpack-cli -D

3.安装webpack-dev-server插件

cnpm -i webpack-dev-server -D

4.安装html-webpack-plugin

cnpm -i html-webpack-plugin -D

5.安装babel需要的loader和语法,识别JSX

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D

6.在更目录下新建 .babelrc 配置文件

{"presets": ["env","stage-0","react"],"plugins": ["transform-runtime"]
}

7.那装识别css的loader

cnpm i style-loader css-loader -D

8.安装识别图片的loader

cnpm i file-loader url-loader -D

7.新建webpack.config.js

const path=require('path')
const HtmlWebPackPlugin=require('html-webpack-plugin')
const {json} = require("express");
const {join} = require("crypto-browserify/example/bundle");  //导入在内存中自动生成index页面的插件//创建一个插件的实例
const htmlPlugin=new HtmlWebPackPlugin({template:path.join(__dirname,'./public/index.html'),//源文件filename:'index.html'//生成内存中的首页名称
})//向外暴露一个大包的配置对象
//webpack 默认只能大包处理.js后缀的文件，像.png,.vue无法主动处理，所以要配置第三方的loader;
module.exports={mode:'development',//development producationplugins:[htmlPlugin],module:{//所有第三方 模块配置规则rules:[{test:/\.js$/,    //将JSX语法转换为react中React.createElement形式来执行use:'babel-loader',exclude:/node_modules/,  //一定要加exclude排除项}, {test:/\.css$/，//识别.css格式和style格式use:['style-loader','css-loader'],}, {test: /\.(jpg|png|svg)$/,   //识别图片loader: 'url-loader',}]},resolve:{extensions:['.js','.jsx'],//表示这个后缀名可以省略不写alias:{'@':path.join(__dirname,'./src')}//@符号表示src这一层路径}}

如果遇到Preset files are not allowed to export objects的问题：

原因：babel-loader8 应该与其他模块 v7 一起使用，

解决：npm i babel-loader@^7 -D

亲测有效！

webpack打包react项目步骤相关推荐

[react] 使用webpack打包React项目，怎么减小生成的js大小？
[react] 使用webpack打包React项目,怎么减小生成的js大小? 打包优化的问题解决思路: 代码压缩:UglifyjsWebpackPlugin 代码分组 commonsChunkPlu ...
使用webpack打包vue项目
使用webpack打包vue项目安装webpack工具,安装方式有两种:全局安装(命令:npm install -g webpack webpack-cli)以及安装在项目中,这里使用第二种: // ...
webpack打包前端项目入门
前言:在开发过程中,利用webpack可以帮我们自动把ES6语法编译成低版本浏览器能解析的JavaScript代码.下面给出webpack打包前端项目入门案例. [终端:进入项目所在目录] 1.初始化 ...
webpack打包vue项目之后dist文件夹在本地跑起来
webpack打包vue项目之后dist文件夹在本地跑起来转载为:https://blog.csdn.net/u014054437/article/details/79981307 谢谢博主亲测, ...
react打包后图片丢失_使用 webpack 搭建 React 项目
简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
webpack 打包ts项目_使用webpack打包ts
初始化package.json npm init -y cnpm i -D webpack webpack-cli(webpack命令行工具) typescript ts-loader(整合) 2.1 ...
webpack打包VUE项目读取外部配置文件，灵活配置域名
参考方案一作为一个兼职前端和运维的java程序员,今天我司测试人员提出了一个需求,当后台服务地址ip地址改变后,webpack打包的VUE项目得更改地址重新打包,太麻烦了,最好可以读取外部配置文件的 ...
webpack打包vue项目之后生成的dist文件该怎样启动运行跑起来
webpack打包生成了dist文件 ,直接运行dist文件中的index.html会报这个错. 我们需要部署在express-generator服务器上来运行. 安装express-generato ...

webpack打包react项目步骤

webpack打包react项目步骤相关推荐

最新文章

热门文章