webpack5 配置react和vue框架

一、React

一、下载依赖

@babel/preset-react用于编译jsx语法

二、配置

配置.babelrc

// .babelrc

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

配置webpac

​
// webpack.common.js

module.exports = {
    // ...

    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['babel-loader'],
                // include和 exclude是排除范围
                include: srcPath,
                exclude: /node_modules/
            },
             
            // ...
        ]
    },
    
    // ...
}

​

二、Vue

一、安装依赖

vue-loader用于编译vue

二、配置

配置webpack

// webpack.common.js

module.exports = {
  
    // ...

    module: {
        rules: [
            // ...

            {
                test: /\.vue$/,
                use: ['vue-loader'],
                include: srcPath,
            }
        ]
    },
  
    // ...
}