webpack 入门入口(entry)出口(output

Posted 你看得到我?

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack 入门入口(entry)出口(output相关的知识,希望对你有一定的参考价值。

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配置比较重要,会在第二章进行讲解
        }
    }
}

 

以上是关于webpack 入门入口(entry)出口(output的主要内容,如果未能解决你的问题,请参考以下文章

webpack核心概念

webpack小结

webpack入门

webpack实用配置

webpack入门指南-step03

vue入门到就业之vue01--初识vue