webpack 入门入口（entry）出口（output

Posted 2020-11-26 你看得到我？

webpack.config.js

const path = require("path");//不同的系统上对于，路径的定义是不一样的，使用path模块可以避免这些差异带来的影响
const join = function (url) {//定义一个路径拼接程序
    return path.join(__dirname, "../" + url)
}
//webpack可以导出多种类型的配置，这里我比较喜欢使用一个函数，主要是比较灵活
module.exports = function (env, argv) {
    return {
        mode: "development",//首先配置模式，模式有两种一种是生产模式一种是开发模式，针对这两种模式不同的需求，webpack会启用不同的插件，从而产生不同的结果
        //入口文件，webpack根据这文件来确定依赖关系，有此来确定哪些依赖库是需要的，才好把它们打包到一起；
        entry: () => {
            // 它接收三种类型的参数，
            // 1字符串，
            // 2字符串数组
            // 3对象
            // return join("src/js/app.js")//打包出来的结果是一个main.js文件
            // return [join("src/js/app.js"), join("src/js/app2.js")] //打包出来的结果是一个main.js文件，但是app.js与app2.js中的代码都整个在一个main.js文件中了
            return {
                app_out1: join("src/js/app.js"),
                app_out2: join("src/js/app2.js"),
            }//打包出来的结果是dist中出现,app_out1.js和app_out2.js两个文件,它们的名字和默认和key值对应,并且之包含对应文件中的代码
        },
        output: {
            // filename: "name.js",//输出文件的名字，输出结果为name.js
            filename: "js/[name].js",//模板语法，js/表示dist的js文件夹下,[name]表示源文件对应的entry的key值，输出结果为js/app_out1.js。还有更多的模板语法，可以灵活运用
            path:join("dist_out")//输出地址，必须为绝对路径,默认为项目根目录下的dist
            // 还有一个publicPath配置比较重要，会在第二章进行讲解
        }
    }
}