導(dǎo)入組件的時(shí)候省略后綴名

在webpack.config.js文件里添加如下代碼

resolve:{
        extensions:['.js','.jsx','.json']//表示這幾個(gè)的后綴名可以參略
    }

表示省略.js、.jsx、.json三個(gè)后綴名的文件
如我們創(chuàng)建Hello.jsx模塊

import React from 'react'//創(chuàng)建組件、虛擬dom元素，生命周期

function Hello(props){
    return <a>姓名:{props.name}---年齡：{props.age}</a>
}
export default Hello

然后在導(dǎo)入的時(shí)候只需要

import Hello from './components/Hello'

react會(huì)在components文件夾下根據(jù)extensions里的順序依次查詢(xún)，先查詢(xún)Hello.js文件，發(fā)現(xiàn)沒(méi)有，再查找Hello.jsx，如果還沒(méi)有，就查找Hello.json

配置webpack根目錄

在webpack.config.js文件里添加如下代碼

resolve:{
        alias:{
            '@':path.join(__dirname,'./src')
        }
    }

導(dǎo)入模塊的時(shí)候我們就可以寫(xiě)成

import Hello from '@/components/Hello'

webpack.config.js最終代碼

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');//導(dǎo)入 在內(nèi)存中自動(dòng)生成index頁(yè)面的插件

//創(chuàng)建一個(gè)插件的實(shí)例對(duì)象
const htmlPlugin = new HtmlWebPackPlugin({
    template:path.join(__dirname,'./src/index.html'),//源文件
    filename:'index.html'//生成的內(nèi)存中的首頁(yè)名稱(chēng)
})
module.exports = {
    mode:'development', //development開(kāi)發(fā)。production 發(fā)布
    plugins:[
        htmlPlugin
    ],
    module: {
        rules: [
            {
                test: /\.js|jsx$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    },
    resolve:{
        extensions:['.js','.jsx','.json'],//表示這幾個(gè)的后綴名可以參略
        alias:{
            '@':path.join(__dirname,'./src')
        }
    }

}