码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-01-28 15:39:33      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:重要   main   exports   out   path模块   文件夹   put   插件   env   

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 入门(1)入口(entry)出口(output

标签:重要   main   exports   out   path模块   文件夹   put   插件   env   

原文地址:https://www.cnblogs.com/wrhbk/p/12237784.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!