详细解释如何快速配置webpack多入口脚手架

时间：2021-08-28 来源：互联网编辑：宝哥软件园浏览：次

背景

当我们开发基于vue的单个项目时，我们会初始化一个vue-cli，但是当我们想在其他项目中共享这组模板时，我们需要重新初始化一个或者克隆它，这是非常不方便的。而且很多人开发的时候，我们希望所有的开发代码都在一个git目录下，所以有必要配置webpack。当一些页面需要多个门户时，我们需要多门户配置。

首先初始化一个项目

我们通过vue init webpack演示生成的文件目录如下

修改项目条目

要更改多个条目，首先在webpack.base.conf.js中修改上下文和条目

上下文：基本目录，绝对路径，用于从配置中解析入口点和加载器。

入口：应用程序的起点或起点入口。从这个起点开始，应用程序开始执行。

module . exports={ context : path . resolve(_ _ dirname，'./')，entry : { app : }。/src/main.js' }，}；如果项目只有一个条目，可以直接在这里更改条目，但是一般来说，我们在一个目录中有多个项目，所以我们需要提取上下文和条目。

const paths=require('。/path’)const rootPath=path . rootPath module . exports={ context : rootPath entry : { app : utils . GetEntry()，}，}；在配置中创建new _config.js和paths.js

_config.js用于设置当前启动项目并将此文件添加到。gitignore，因为在未来的开发中，很多人会在本地修改项目地址。

使用严格的' module . exports={ appName : ' mobile '，projectName:' demo'}这里设计了两个目录，appName是src下的一级目录，projectName是appName下的二级目录，方便扩展。比如公司的项目分为pc项目和移动项目，开发的时候很容易区分。如果项目较少，可以将appName编写为固定的字符串，如页面，并且每次切换项目时只更改projectName。我们把所有的项目放在src下，类似的目录如下

移动演示演示个人电脑演示演示2路径. js，用于配置全球所需的一些路径

使用严格的“const path=require(' path ')const fs=require(' fs ')const _ config=require('。/_ config’)const root path=fs.realpathSync(process . CWD())//项目根fs . realpath sync的意思是获取真实路径const resolve=相对路径=path.resolve(根路径，相对路径)//自定义一个解析函数。所需的路径地址模块. exports={rootPath，//项目根目录commonPath: resolve('common ')，//公共目录project path : resolve(` src/$ { _ config . appname }/$ { _ config . project name } `)，//子项目根目录config3360resolve ('config ')，//项目配置static : resolve(' static ')//public static

我们在src的同一级别创建一个新的公共文件夹来存储静态资源和公共组件

-组件-assets -components -xhr资产可以存储公共样式css、公共字体字体、公共图片img、公共方法js等。组件存储提取的公共组件，xhr我放axio包，整个文件夹可以自定义修改，这里就不展开了。如果项目简单且没有必要，只需删除paths.js中相应的部分

再次查看修改后的条目，我们在配置文件夹中的utils.js中添加了一个getEntry方法，并在条目处引用了它。

使用严格的"/"省略.const paths=require(' ./path ')const fs=require(' fs ')//省略.出口。GetEntry=()={ const Entrypath=路径。解析(路径。项目路径，“entry”)const Entrymanes=fs .readdirSync(entryPath).筛选器(n=/\ .js$/g.test(n)).map(n=n.replace(/\).js $/g ' '))const Entrymap={ } entry name。foreach(name=(entryMap[name]=[.['babel-polyfill '，path.resolve(entryPath，` $ { name }。js))返回entryMap}实际上就是对当前项目进入文件中的射流研究…文件进行遍历，如果是单个就是单入口，多个就是多入口。

创建2个项目

资产静态资源config.js代理配置、打包地址等配置进入入口文件夹demo1是一个单入口项目，demo2是一个多入口项目，如果是多入口项目，需要在进入增加对应的射流研究…文件，如上图中的more.html和more.js，上面的getEntry其实找的就是index.js和more.js。

我们再看一下demo2中进入中的index.js和more.js

//索引。从' Vue '导入应用程序' jsimport Vue./App'new Vue({ el: '#app '，路由器，组件： { App }，模板： ' App/' })//更多。从' Vue '导入应用程序' jsimport Vue./More'new Vue({ el: '#more '，components: { App }，template: 'App/'})引入对应的组件就好，再看下config.js

const host='http://xxx.com/api' //测试地址模块。导出={ dev : }//代理代理配置可代理： { '/API ' : {目标：主机，//源地址changeOrigin: true，//改变源logLevel: 'debug '，ws: true，路径重写： { '^/api': ' '//路径重写} } }，build: { //build输出路径//asset rot :路径。解决(过程。CWD()，' ')} //是否启用postss-pxtorem插件https://github.com/cuth/postcss-pxtorem///pxtorem : true } }这里就是根据需要自行配置了，如果不需要完全可以不要这个文件，重要的还是进入的入口文件。

打包出口配置

入口改好了，我们再看出口，找到如下内容

//webpack。戴夫。糖膏剂jsplugins :[新网络包.DefinePlugin({ ' process。env ' :必需('./config/dev。env ' })，新的网络包.HotModuleReplacementPlugin()，新的网络包.NamedModulesPlugin()，//HMR在更新时在控制台中显示正确的文件名。新的网络包NoEmitOnErrorsPlugin()，//https://github.com/ampendandwired/html-web pack-plugin新的html webpackplugin({ filename : ' index。html '，template: 'index.html '，inject: true })，//复制自定义静态资产新的CopyWebpackPlugin([{ from :路径。解析(_ dirname’)./static ')，到： config。戴夫。资产子目录，ignore: [.*]}]))//web pack。产品。糖膏剂jsnew html webpackkplugin({ filename : config。建造。index，template: 'index.html '，inject: true，minify 3360 { remove comments : true，collapseWhitespace: true，removeattributequots ://更多选项：//3https://github。com/kangax/html-minifier #选项-省略//将自定义静态资产复制到新的复制webpackplugin([{从：路径。resolve(_ _ dirname '，/static ')，到： config。建造。资产子目录，ignore: [.*]}])html web packkkplugin的作用是生成一个HTML5文件，CopyWebpackPlugin的作用是将单个文件或整个目录复制到构建目录。我们在utils.js中新建2个方法gethtml webpackkplugin和getCopyWebpackPlugin，对这两个方法进行替换，让他们支持多入口。改动后如下

//webpack。戴夫。糖膏剂js插件：[新网络包.definepreplugin({ ' process。env ' : require(')./dev。env ' })，新的网络包.HotModuleReplacementPlugin()，新的网络包.NamedModulesPlugin()，//HMR在更新时在控制台中显示正确的文件名。新的网络包NoEmitOnErrorsPlugin()，//https://github.com/ampendandwired/html-web pack-plugin//改动.utils。gethtml webpackkplugin(base webpackkconfig)，//复制自定义静态资产//改动.utils。getcopywebpackplugin()]//web pack。产品。糖膏剂js/改动.utils。gethtml webpackkplugin(base webpackkconfig)，//省略//改动.utils。getcopywebpackplugin()//utils。jsexports。gethtmlwebpackplugin=basebpackconfig={ const HTmlwebpackpluginlist=[]const entryname=object。密钥(basebpackconfig。entryNames)条目。foreach(名称={ HtmlWebpackPluginList。push)新的HtmlWebpackPlugin(对象。分配({ filename : config。建造。文件名过程。ENV。node _ ENV=“生产”？配置。建造。文件名： ` $ { name }。html `,模板：配置。建造。模板流程。ENV。NODE _ ENV==' production '？路径。解析(路径。项目路径，配置。建造。模板):路径。解析(路径。项目路径`${name}。html `)，inject: true，excludechunk 3360 entryname。过滤器(n=n！==name) }，进程。ENV。NODE _ ENV===' production '？{ minify : { remove comments : true，collapsewespace : true//removeattributequots : true }，chunkssortmode : ' dependency ' } : })})返回html webpackluginlist }导出。getcopywebpacklugin=()={ const project静态路径=path。解析(路径。项目路径，“静态”)常量资产子目录=流程。ENV。node _ ENV==' production '？配置。建造。资产子目录：配置。戴夫。资产子目录const rootConfig={来自：路径。静态，到：子目录，忽略：[].*]} const PROJECt config={从： PROJECt静态路径，到：子目录，忽略：[].*]}返回[新副本web pack plugin(fs。existssync(项目静态路径)？[rootConfig，项目配置]:[rootConfig])]}修改index.js

我们找到配置里index.js，对其做一些修改，让我们可以在项目里的config.js中配置代理，打包目录，让模板更灵活。

//配置/索引。射流研究…改造前dev: { //路径assetsSubDirectory: ' static '，assets publicatpath : '/'，proxyTable: {}，//各种开发服务器设置host: 'localhost '，//可以被process.env.HOST }覆盖，build : {//index.html索引的模板：路径。resolve(_ dirname ,)./dist/index.html ')，//path asset rot : path。resolve(_ _ dirname '，/dist ')，assetsSubDirectory: ' static '，assetpublipath : '/'，//省略}//config/index.js改造后const paths=require(' ./path)常量解析=相对路径=路径。解析(路径。项目路径，相对路径)const _ config=require(resolve(' config。js ')//子项目工具配置dev : {//path assets子目录： ' static '，assets publicatpath : '/'，代理表： _ config。戴夫。代理表，//各种偏差服务器设置host: '0.0.0.0 '，//可被process.env.HOST覆盖，} build : {//index.html索引的模板：路径。resolve(_ dirname ,)./dist/index.html '，//path asset rot : _ config。建造。assetroot | |路径。resolve(_ _ dirname '，/dist ')，assetsSubDirectory: ' static '，assets publicatpath : _ config。建造。公共hpath | | ' ./', //省略}到这里，我们的多入口配置就基本完成了，注意修改过的配置文件里一些引用需要加上，检查下路径是否正确。

由于我们的目标是创建多门户模板，以demo2为例，在运行npm run dev时，如果服务为http://LocalHost 33608080，则浏览器访问多页面门户时的url为http://localhost 33608080/more . html，注意自带。html。

运行npm运行构建，我们会发现dist文件夹中有2个html，表明多条目打包成功