应用 webpack 构建实在的 react 工程

进入我的项目文件夹, 初始化我的项目

cd reaact-demo
npm init -y

装置依赖

装置 react

npm install react react-dom
此时 package.json 中应该有 react 和 react-dom

装置 webpack

- d 代表装置在开发环境中
npm install webpack webpack-cli -d

此时 webpack 会被装置在 node_modules 中
间接执行 webpack 会报错, 须要进入 node_modules 文件夹中找到 webpack 才能够执行
也能够的通过 - g 的形式全局装置 webpack

npm install webpack webpack-cli -g
webpack -v
呈现版本号即为装置胜利 

初始化我的项目文件内容

新建 src 文件夹，模仿 App.jsx，index.html，index.jsx 子文件

<!-- index.html -->
  <div id="app"></div>

  import App from './App.jsx'

// App.jsx
  import React from 'react'
  import ReactDom from 'react-dom'

  const App = () => {
    return (
      <div>
        <h1>webpack 测试 </h1>
      </div>
    )
  }

  export default App
  ReactDom.render(<App/>, document.getElementById('app'))

通过 webpack 应用 babel 编译我的项目文件

简略地应用 babel 编译一个文件

装置 babel

npm install @babel/core @babel/cli -d

装置 babel 编译规定

npm install @babel/preset-env

运行 babel，编译文件，测试将 ES6 编译为 ES5

// test.js
[1,2,3].map((item)  => {console.log(item)
})

运行 babel 命令

babel test.js --presets=@babel/preset-env
<!-- 输入后果 -->
"use strict"
[1, 2, 3].map(function (item) {console.log(item)
})
ES6 曾经转化为了 ES5

配置 babel 的办法

能够在 package.json 里间接对 babel 进行配置
也能够在根目录新建一个.babelrc 的文件
.babelrc 的优先级最高，babel 在编译的时候会优先查找.babelrc 文件
配置内容的写法雷同 都是 json 格局

// package.json or .babelrc
{
  "babel": {"presets": ["@babel/presets-env"]
    // 规定：[规定内容]
    // 指定 babel 编译规定
  }
}

在 webpack 中将 babel 作为 laoder 应用

装置须要的依赖和规定

npm install babel-loader
npm install @babel/preset-env @babel/preset-react
npm install html-webpack-plugin -d

const HtmlWebPackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
  // 规定 webpack 读取文件时的后缀
  resolve: {extensions: ['.wasm', '.mjs', '.js', '.jsx', '.json']
  },
  // 入口文件
  entry: path.resolve(__dirname, 'src/index.jsx'),
  // 编译文件
  module: {
    rules: [
      {
        // 应用正则匹配 js 或 jsx 文件
        test : /\.jsx?/,
        // 排除 node_modules 文件夹
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            // 不通过 babelrc
            babelrc: false,
            // 规定
            presets: [
              // 本义 jsx
              require.resolve('@babel/preset-react'),
              // 本义 ES6
              // modules 代表模块化计划的指定，是否把 import 作为模块编译
              [require.resolve('@babel/preset-env', { modules: false})]
            ],
            // 是否将编译内容缓存
            cacheDirectory: true
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({template: path.resolve(__dirname, 'src/index.html'),
      filename: 'index.html'
    })
  ]
}

开始打包文件

webpack --mode development
开发环境下