Webpack配置文件webpack.config.js

webpack打包默认入口函数是index.js，出口是dist文件夹下的main.js，那么要在哪儿修改入口和出口的具体位置呢？ 那就让我们看看webpack的配置文件webpack.config.js

const path=require("path")

module.exports={
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,"./build"),
        filename:"bundle.js"
    },
    module:{
        rules:[
            {
                test:/\.css$/, //正则
                //1.loader语法糖写法(不需要配置其他的loader时候可以使用语法糖)
                //loader:"css-loader"

                //2.完整写法
                use:[
                    //加些其他参数
                    //{loader:"css-loader"}

                    //从后往前加载
                    "style-loader",
                    "css-loader"
                    
                ]
            }
        ]
    }
}

在这段代码中用了entry指定了入口文件，output则指定了出口文件。
值得注意的是path后面要跟的是绝对路径，这里引用了path模块中的resolve方法，将__dirname（当前文件所在位置的绝对路径）和“./build”给拼接一起。

module里面写loader,js打包因为webpack有commonJS可以打包js文件，css则需要增加对应的css-loader，npm install css-loader后再在config中写好rules。