时间:2021-05-26
本文介绍了React + webpack 环境配置的方法步骤,分享给大家,具体如下:
安装配置Babel
babel-preset-es2015 ES6语法包,使代码可以随意地使用ES6的新特性。
babel-preset-react React语法包,专门用于React的优化,在代码中可以使用React ES6 classes的写法,同时直接支持JSX语法格式
安装Babel loader
配置 .babelrc
安装完Babel和它的插件,配置一下它的规则,在根目录下新建一个.babelrc空文件:
// 告诉Babel,编译JavaScript代码的时候要用这两个presets编译 { "preset": ["es2015", "react”] }安装配置ESLint
安装ESLint loader
为webpack添加这个preLoaders(在loader处理资源之前,先用preLoaders进行处理,代码检查在代码转换之前进行)
npm install eslint eslint-loader --save-dev这里使用Airbnb开发配置合集eslint-config-airbnb,这个配置合集里面还包括以下3个插件:
npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-devnpm install eslint-config-eslint配置 .eslintrc
在根目录下新建一个.eslintrc的空文件:
{ "extends": "airbnb", "rules": { "comma-dangle": ["error", "never"] } }安装配置webpack
配置webpack之前,先安装一个webpack的插件——html-webpack-plugin,它可以帮助我们自动生成HTML页面,并且引入正确的JavaScript文件依赖:
npm install html-webpack-plugin —save-dev在项根目录下新建一个webpack.config.js文件:
let path = require('path') let webpack = require('webpack')let HtmlwebpackPlugin = require('html-webpack-plugin')// 一些常用路径const ROOT_PATH = path.resolve(__dirname)const APP_PATH = path.resolve(ROOT_PATH, 'app')const BUILD_PATH = path.resolve(ROOT_PATH, 'build')module.exports = { entry: { app: path.resolve(APP_PATH, 'index.jsx') }, output: { path: BUILD_PATH, filename: 'bundle.js' }, // 开启 dev source map devtool: 'eval-source-map', // 开启 webpack dev server devServer: { historyApiFallback: true, hot: true, inline: true, progress: true }, modules: { // 配置preLoaders, 将eslint 添加进去 preLoaders: [ { test: /\.jsx?$/, loaders: ['eslint'], include: APP_PATH } ], // 配置loader,将Babel添加进去 loaders: [ { test: /\.jsx?$/, loaders: ['babel'], include: APP_PATH } ] }, // 配置 plugin plugins: [ new HtmlwebpackPlugin({ title: 'my first react webpack' }) ], resolve: { extensions: ['', '.js', '.jsx'] // 在js中import加载jsx扩展名的脚本 }}添加组件热加载(HMR)功能
npm install babel-preset-react-hrme --save-dev这个preset里面其实包括两方面:
配置一下 .babelrc:
{ "preset": ["es2015", "react"], "env": { "development": { "presets": ["react-hrme"] } }}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
环境主要依赖版本webpack@4.8.1webpack-cli@2.1.3webpack-dev-server@3.1.4react@16.3.2babel-
本文介绍了React全家桶环境搭建过程详解,分享给大家,具体如下:环境搭建1.从零开始搭建webpack+react开发环境2.引入Typescript安装依赖
前言最近在用webpack打包react代码的时候发现一个问题,做一个处理总结分享出来给大家,下面来一起看看详细的介绍:我的webpack配置:varwebpa
除了的webpack基本配置,还可以进一步添加配置,优化合并文件,加快编译速度。下面是生产环境配置文件webpack.production.js,与wenbpa
前言如果我们从零开始用webpack+es6来结合react开发前端应用,那势必会在各种webpack配置中消耗大量精力,于是便有了各种脚手架,create-r