webpack配置文件设置

Webpack是用于为浏览器构建JavaScript模块脚本的前端工具

全局安装 npm i -g webpack webpack-dev-server

文件内部配置

//导入路径模块
const path = require("path");
module.exports = {
    // 入口
    entry: {
        bundle1:"./main.js",
        bundle2:"./main1.js",
        bundle3:"./main.jsx",
    },
    // 出口
    output: {
        // 绝对路径
        filename: '[name].js'
    },
    // 模块
    module: {
        rules:[
            {
            	//正则选择文件
                test:/\.jsx?$/,
                //导入模块
                exclude:/(node_modules)/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets: ['react']
                    }
                }
            },{
                test:/\.css$/,
                use : ['style-loader','css-loader']
            }
        ]
    },
    // 插件
    plugins:[],
    // 开发服务器
    devServer:{
        // 模块安装
        // npm install webpack-dev-server --save-dev
        // contentBase: path.resolve(__dirname, 'dist'),
        // host: '192.168.1.9',
        // compress: true, //服务端是否启用压缩
        // port:1717

    }
};

如果导入babel模块之后报错

Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.ou should install 'babel-loader@7'.

以上报错内容出现的原因

bable-loader和babel-core的版本不对应所查询的

babel-loader 8.x对应的是babel-core 7.x

babel-loader 7.x 对应的是babel-core 6.x

查看完版本执行

npm install --save-dev babel-loader@7.1.5