webpack之资源解析

解析ES6

使用babel-loader

module.exports = {
    module: {
        rules: [
            { 
                test: /\.js$/,
                use: 'babel-loader'
            }
        ]
    },
};

babel的配置文件是：.babelrc

{
    "presets": [
        "@babel/preset-env" //增加ES6的babel preset配置
    ],
    "plugins": [
        "@babel/proposal-class-properties"
    ]
}

安装依赖，其中i是install的简称，-D是--save--dev的简称

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

解析React JSX

安装依赖

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

babel的配置文件是：.babelrc

{
    "presets": [
        "@babel/preset-env", // 增加ES6的babel preset配置
        "@babel/preset-react" // 增加 React 的 babel preset 配置
    ],
    "plugins": [
        "@babel/proposal-class-properties"
    ]
}

修改search.js文件

'use strict';

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

class Search extends React.Component {
    render () {
        return 
Search Text
    }
}

ReactDOM.render(
    ,
    document.getElementById('root')
)

解析CSS

安装依赖

 npm i -D style-loader css-loader

css-loader 用于加载 .css 文件，并且转换成 commonjs对象，style-loader将样式通过