【webpack结合React开发环境配置】React开发环境配置之Webpack结合Babel8.x版本安装的正确姿势（Webpack最新版4.x结合Babel8.x环境配置步骤）...

1. 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org【使用淘宝镜像】
2. 初始化package.json文件
cnpm init -y
3. 安装webpack
cnpm install -d webpack webpack-cli
5. 安装webpack-dev-server（动态显示界面刷新）
cnpm install -d webpack-dev-server
6. 安装html-webpack-plugin【安装插件，用于把index.html加载到内存中去显示】
 cnpm install -d html-webapck-plugin
7. 安装babel[关键点]
cnpm install babel-loader -d[如果安装失败的话，就使用npm install babel-loader, 默认安装的就是一个babel的最新版了]
cnpm install @babel/core @babel/preset-env -d
8. 安装react相关
cnpm install @babel/preset-react -d
9. 配置文件webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlgin = new HtmlWebpackPlugin({
    // 配置成功之后会自动在内存中生成一个index.html文件，同时也是可以直接在页面的尾部追加一个main.js文件的
    template : path.join(__dirname, './src/index.html'),
    filename:'index.html'
})
module.exports = {
    // prduction 模式下会自动压缩，development模式下是不会自动进行压缩的。【这是一个必须选项】
    mode : 'production',
    // webpack4.x 约定了默认的打包入口文件是src下面的index.js文件
    // entry : './src/main.js'         // 指定打包的入口文件，也可以不指定设置一个index.js文件
    plugins : [
        htmlPlgin
    ],
    module : {
        // 所有第三方模块的配置规则（Webpack默认只能打包js文件，对于其他vue，png，react是无法直接使用的）
        // 只要代码中有webpack不能识别的规则，就需要配置loader
        rules : [
            {test : /\.(js|jsx)$/, use : 'babel-loader', exclude : /node_modules/}  // 这里的exclude是不能少的
        ]
    }
}

　　

10. 配置.babelrc文件

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

　　

11. 为了实现打包后的代码的复用性，使用一个babel-transform-runtime这个插件
babel-runtime 是供编译模块复用工具函数。是锦上添花（可以实现代码复用）
babel-polyfil是雪中送炭，是转译没有的api.（类似于String.protype.indludes = func(){}, 手动增加了一个原型方法）

cnpm install -d @babel/plugin-transform-runtime

转载于:https://www.cnblogs.com/52tech/p/9917661.html