应用webpack构建实在的react工程

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

cd reaact-demonpm 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 -gwebpack -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-loadernpm install @babel/preset-env @babel/preset-reactnpm 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开发环境下