webpack 入门(1)入口(entry)出口(output
2021-04-23 15:29
标签:重要 main exports out path模块 文件夹 put 插件 env webpack.config.js webpack 入门(1)入口(entry)出口(output 标签:重要 main exports out path模块 文件夹 put 插件 env 原文地址:https://www.cnblogs.com/wrhbk/p/12237784.htmlconst 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
文章链接:http://soscw.com/index.php/essay/78574.html