webpack参考文档:https://www.valentinog.com/blog/webpack-4-tutorial/
react:参考文档:https://reactjs.org/docs/add-react-to-a-new-app.html
es6参考文档:http://www.ruanyifeng.com/blog/2017/09/es6_primer_3rd_edition.html
let's start
一、安装运行环境:node.js
1、应用程序下载地址:https://nodejs.org/en/
node -v 查看node版本(我的V9.9.0V) ;npm -v我的版本(v5.7.1)
2、安装yarn 依赖包管理工具
npx install -g yarn
二、react应用程序
1、创建react简单应用
在命令行运行
np install -g create-react-app(可用于生成一个简单的react应用程序,需要安装在全局环境中)
create-react-app webpack-react(创建react projects 命名为webpack-react名字自定义)
文件结构如下:
2、运行react
cd webpack-react
yarn start //简单的react就克在浏览器中打开了
三、配置webpack
1、安装webpack依赖项,webpack运行需要的一些依赖项
npx install webpack webpack-cli webpack-dev-server --save-dev
2、安装es6转码器,es6的一些新语法特性旧版本的浏览器识别不了,需要通过转码器将其转换成es5语法。
- npm i babel-core babel-loader babel-preset-env --save-dev
3、配置转码文件,新建一个文件命名为.babelrc,内容如下:
{
“presets”:[
"react","env","stage-2"
]
}
3、配置webpack
根目录下新建目录webpack,在此目录下新建三个文件一个保存基础配置,一个用于开发环境配置,一个用于生产环境配置
4、配置webpack.base.config.js文件
const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');//html插件,需要安装依赖项 npm install htmp-webpack-plugin --save-dev const MiniCssExtractPlugin = require("mini-css-extract-plugin");//压缩css文件 module.exports = { entry:{ main: path.join(__dirname,"../src/index.js"), //入口文件 common:['react','react-dom'] },