Webpack 解析ES6和React

webpack解析ES6

webpack原生可以识别js，但不能识别ES6语法
因此需要借助babel-loader以及.babelrc配置文件

babel-preset是一系列babel plugin的集合

安装以下npm包

npm i @babel/core@7.4.4 @babel/preset-env@7.4.4 babel-loader@8.0.5 -D

配置.babelrc文件

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

配置webpack babel-loader

'use strict';

const path = require('path');

module.exports = {
    // 入口 指定入口文件
    entry: {
        app:'./src/index.js', 
        search:'./src/search.js'
    },
    // 出口 
    output: {
        // 指定输出目录
        path: path.join(__dirname, 'dist'),
        // 指定打包之后的输出文件
        filename: '[name].js'
    },
    // 配置babel解析ES6
    module:{
        rules:[
            {
                test:/.js$/,
                use:'babel-loader'
            }
        ]
    },
    // 生成模式还是开发模式
    mode: 'production'
};

webpack解析react

安装依赖

npm i react@16.8.6 react-dom@16.8.6  @babel/preset-react@7.0.0 -D

{
  "name": "02beginning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": " webpack "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2"
  }
}

配置.babelrc

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

编写react组件

"use strict"

import React from 'react'
import ReactDOM from 'react-dom'

class Search extends React.Component{
    render(){
        return (
            <div>search text</div>
        )
    }
}

ReactDOM.render(<Search />,document.getElementById('root'))

将react文件配置到 webpack 入口文件下

'use strict';
const path = require('path');
module.exports = {
    // 入口 指定入口文件
    entry: {
        app:'./src/index.js', 
        search:'./src/search.js',
        reactComp:'./src/react-comp.js'
    },
    // 出口 
    output: {
        // 指定输出目录
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    // 配置babel解析ES6
    module:{
        rules:[
            {
                test:/.js$/,
                use:'babel-loader'
            }
        ]
    },
    // 生成模式还是开发模式
    mode: 'production'
};

执行命令解析

npm run build

引入打包文件到一个有root文件的html文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <div id="root"></div>
    
    <script src="./reactComp.js" type="text/javascript"></script>
    
</body>
</html>

相关版本文件

package.json

{
  "name": "02beginning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": " webpack "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2"
  }
}

.babelrc

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