安装webpack
npm i webpack --save-dev
如果使用 -g参数,可以安装到全局使用,在当前目录安装,可执行文件为 ./node_modules/.bin/webpack
配置webpack.config.js
var path = require('path'); module.exports = { entry: path.resolve(__dirname, 'src/index.js'), output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js', }, };
entry为打包的入口文件,output为打包后生成的文件名及路径。
源代码可以编写成多个文件,然后由入口文件调用组装,相互独立的组件最好分别单独写在一个文件中
打包源文件
在当前目录执行webpack 或 ./node_modules/.bin/webpack 命令,就可以将源文件打成生成build/bundle.js文件,网页中直接作用<script src="build/bundle.js"></script>来调用即可
本地开发调试
先安装 webpack-dev-server
npm i webpack-dev-server --save
在package.json文件中scripts下面添加相应的配置(可以使用npm init来生成package.json文件)
{ "scripts": { "build": "webpack", "dev": "webpack-dev-server --port 8080 --inline --content-base ./build" } }
--inline加入该参数可以实现自动刷新,
在当前目录执行 npm run dev,执行完成后,在文件夹build中新建index.html,加入如下代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tests</title> </head> <body> <div id="react-content"></div> <script src="./bundle.js"></script> </body> </html>
在浏览器中打开 http://localhost:8080 就可以实时查看效果,修改后代码后,需要刷新才能查看到效果。执行npm run build可以打包,相当于执行webpack命令
Cannot GET / 错误
是由于package.json中的
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
build文件夹不存在
配置react和babel
安装react
npm install react --save安装babel相关组件,让webpack自动转换jsx,
npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev
在webpact.config.js的module的loaders中增加相应配置
module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel', // 'babel-loader' is also a legal name to reference query: { presets: ['react', 'es2015'] } } ] }
配置完成后,在js或jsx文件中就可以直接写jsx语法
babel编译es6和jsx
先安装babel-cli
npm install -g babel-cli
再执行
babel src -d dist --presets react,es2015
src 为源文件目录,dist为编译输出目录,--presets 预置插件
支持es7语法
es7语法分四个阶段分别对应四个插件
babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3
选择一个加载就能正确解析es7语法
配置.less
先安装less编译器
npm install less css-loader less-loader style-loader --save-dev
在webpact.config.js的module的loaders中增加相应配置
{test: /\.less$/,loader: "style!css!less"}
配置图片及字体文件
安装url-loader,修改webpact.config.js的module的loaders中增加相应配置
{test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50000&name=[path][name].[ext]'}
react,babel只能安装在当前目录,安装在全局无效,提交到github时需要把这些模块排除掉
npm安装依赖
在当前目录执行npm install会根据当前目录下的package.json文件,把需要的依赖都下载安装
npm升级到3
npm install npm@3.0
相关推荐
解决了react整合webpack时,使用babel-loader后还是不能解析jsx和es6语法的问题
使用Webpack的ES6 React样板 简单优化的React样板这包括: React16.3.2 ECMAScript 6和JSX支持 React路由器v4 使用和组件测试 代码覆盖率 启用了范围吊装的最新Webpack(v.3.11.0)和Webpack Dev Server(v.2.9.5) ...
babel-webpack-react-redux-tutorials React技术栈系列教程,涉及React,Redux,Babel,Webpack等相关技术 目录 前言 巴别塔 Webpack 使用bundle-loader初步加载资源文件 使用webpack-md5-hash Webpack中使用...
[React][2020] webpack 4.x 项目中配置解析 jsx 语法的babel-loader全流程 目录 安装babel插件 安装babel用于解析jsx语法的包 配置 webpack.config.js 配置 .babelrc 文件 正文 提示: 本文使用的babel及相关插件皆为...
前言 这几天写腾讯实习生 Mini 项目的时候用上了 ...我们先来看一下完全没有任何优化的时候,Webpack 的打包速度(使用了jsx和babel的loader)。 下面是我们的测试文件: //test.js var react = require('react'); v
babel-plugin-remove-react-jsx-attribute安装 npm install --save-dev babel-plugin-remove-react-jsx-attributeyarn add -D babel-plugin-remove-react-jsx-attribute介绍这对于删除不需要转译的 JSX 属性很有用。...
运行“ npm i @ babel / core @ babel / preset-env @ babel / preset-react babel-loader nodemon webpack webpack-cli -D”以安装必要的开发包 创建一个名为“ webpack.config.js”的文件。 第一个模块将指定要...
假设您将Babel与模块捆绑器(例如Webpack)一起使用,因为扩展合并帮助器已作为模块导入以避免重复。 这与babel-plugin-transform-react-jsx 。 用法 npm install\ babel-plugin-syntax-jsx\ babel-plugin-...
解决了react整合webpack中使用babel-loader后jsx和es6语法不能识别问题。
本文介绍了React + webpack 环境配置的方法步骤,分享给大家,具体如下: 安装配置Babel babel-preset-es2015 ES6语法包,使代码可以随意地使用ES6的新特性。 babel-preset-react React语法包,专门用于React的...
简单优化的React样板这包括: React16.5.2 ECMAScript 6+和JSX支持 React路由器v4 使用和组件测试 代码覆盖率 启用了范围提升功能的最新Webpack(v.4.16.5),Babel 7和Webpack Dev Server(v.4.19.1) 使用更换热...
基本React 使用Babel构建可测试的React应用程序的最小框架。设计目标使用更少的工具(不要使用yeoman,gulp,bower等) 带Webpack和热加载器的Babel 6 使用模拟出的DOM进行快速测试导入CSS文件作为类名分开的组件...
**在之前的服务器基础上,实际上是webpack+es6+react才是react环境** 安装react环境 1、安装 cnpm install --save react react-dom cnpm install --save-dev babel-preset-react //将jsx->js 2、编写webpack.config...
React 项目 (JSX) 入门,使用 SASS/SCSS、Eslint、Prettier、TailwindcssV2 等,所有这些都使用 Webpack。 git clone项目并开始使用完全优化的 React 开发环境。 开始 用于开发 git clone将存储git clone到您的本地...
使用SASS / SCSS,Eslint,Prettier,TailwindcssV2等的React项目入门(JSX),所有这些都使用Webpack。 git clone项目并开始为React开发使用完全优化的环境。开始吧为了发展git clone将存储git clone到本地计算机...
React项目入门配置工程实现JSX的配置,和webpack打包,为以后的开发服务提供基础,使用npm install快速初始化
使用最新版本的react和babel以及jest和酶来最小化webpack和react样板,以获取有关所用技术的更多详细信息。 实时服务器更改;) 查看以获取更多详细信息 目录 项目结构 build/ src/ |- index.jsx _________________...
npm install webpack babel-loader ,用于ES6和JSX编译。 在本地安装webpack作为加载程序部。 npm install browser-sync browser-sync-webpack-plugin --save-dev npm install eslint eslint-loader --save-dev ...
使用Webpack的ES6 React + Redux-Saga样板 非常感谢 样板包括: React 16.8.0 ECMAScript 6 和 JSX 支持 React路由器 v4 使用 , 和组件测试 代码覆盖率 启用了 Scope Hoisting 的 Webpack v4 和 Webpack ...
使用Babel进行开发 初始构建后监视更改(在控制台中运行“ npx webpack”) 编译和优化html,css,jsx和所有图像类型 jQuery查询 未全局公开,必须通过“ require”添加到jsx文件中 缺失或部分实现: 引导程序 代码...