通过批处理生成前端单页或多页应用程序的方法

一批

现在大部分前端项目都会遇到单页应用，但是有时候需要做多页的时候，单页就会被接管，修改成多页。如果代码太多，可能会混淆单页或多页的配置。那么有没有更好的方法把单页和多页的不同配置代码分开，更清晰地区分它们的区别呢？这里，前端构建是通过批处理部署的。git地址目录分为三个块。

单//单页代码共享//常用代码多//多页代码只有两者结合批量处理才能生成想要的单页或多页应用，提示国内需要安装npm淘宝镜像

如果没有安装，您需要修改命令行，在build.bat中调用cnpm install来调用npm install

如下图所示：

首先选择存储路径，输入项目名称，选择是生成单页还是多页

以单页为例，就是简单的复制文件，复制完成后会自动安装依赖项

安装依赖项后，项目将自动运行。如上所述打开的项目端口是8080

目录如下

Webpack4通用配置(共享)

这里使用了最新的webpack4.0，简化了很多配置，多线程输出，更快的构建能力，大大提高了开发效率

首先看一下配置文件config.js

Const path=require ('path ')，config={//开发环境配置dev: {port: 8080，//接口代理表3360 { '/v2 ' : { target : ' https://API . douban.com '，ChangeOrigin: true }，}，}，//生产环境配置build 3: { packname 3360 ' my projcet '，//打包项目的名称为outputPath://输出目录config . build . output path=path . resolve(_ _ dirname，'././dist/'，config . build . packname)；//最终输出目录条目存储路径config . build . resources path=path . join(config . build . output path，config . build . resources hotpath)；module.exports=config开发环境中有接口代理。

生产环境的目录名和路径

是否将页面字体转换为rem和eslint语法检测也是可选的

Eslint检查是默认的规则检查

它还有另外三个一般规则

您可以根据自己的喜好进行设置

然后是utils.js工具方法

module . exports={/* * * * *获取src */getfiles(){ const files=glob . sync(' src/* */')，arr=[]；files . foreach((file path)={ let name=file path . split('/')[1]；if (name) { arr.push(.[姓名])；} })让obj={ }；if (arr.length) { [.新设置(arr)]。map(item={ obj [`@ $ { item } `]=path . join(_ _ dirname，`./src/$ { item } `)；})} return obj }，/** *多页命名获取每个多页对应的js名称名称* */getfilename(){ let filename=glob . sync(' src/* */index . js ')；entryar={ }；fileName.forEach(函数(路径){ let arr=path . split('/')；let name=arr[arr . length-2]；entryar[name]='。/'路径；})返回entryArr}，/* * * * *静态目录存储路径*/asset path(_ path){ return path . POSIX . join(config . build . resources hotpath，_ path)；}，copyDir(源，目标){ rm('-rf '，目标)；mkdir('-p '，target)；cp('-R '，来源，目标)；}}让我们来看看共享代码webpack.base.conf.js的开发和生产

首先，看看加载器的一些基本操作，比如vue、css和js

规则： [ { test: /\。vue$/，loader: 'vue-loader '，}，{ test: /\。css$/，use: ['style-loader '，' css-loader'] }，{ test: /\。less$/，use: ['style-loader '，' css-loader '，' less-loader'] }，{ test: /\。scss$/，use: ['style-loader '，' css-loader '，' sass-loader'] }，{ test: /\。js$/，loader:process.env.NODE_ENV？happypack/loader？id=happy-babel ' : ' babel-loader '，//loader:' babel-loader '，exclude 3360/(node _ modules | lib)/，include :[//表示只解析以下目录。减少装载机处理范围路径。resolve (_ _ dirname '，/src ')，]，}，{test:/\。(woff2？|eot|ttf|otf)(\？*)?$/，use :[{ loader : ' file-loader '，options 3360 {//生产环境真实路径名：utils。asset path(' font/[name])。[hash:7]。[ext]')}}]，{test33366。g|gif|svg|webp)(\？*)?$/，使用： { loader: 'url-loader '，选项： { limit: 10000，//生产环境名为：utils的真实路径。asset path(' image/[name])。[hash:7]。[ext]')}}，]嗯，都评论过了。注意css、less和SCS的加载顺序。如果找不到前面的加载器，不要因为是从前到后编译而写。

！process.env.NODE_ENV？happypack/loader？id=happy-babel ' : ' babel-loader '，由于在生产环境中打包时js loader的编译会比较慢，所以启动多线程来处理js loader的编译。

HappyPack=require('happypack ')，os=require('os ')，happyThreadPool=HappyPack。thread pool({ size: OS . CPU()。length })，//使用多线程解决js加载器耗时的编译过程。除了SCS之外，可以使用css和vue(web pack 4是多线程的)。createhappyplugin=(id，Loaders)=new happypack({ id : id，Loaders : loaders，threadpool : happy threadpool，verbose : true，//允许HappyPack输出日志})；您需要在插件下添加以下段落

Create happyplugin ('happy-babel '，[{loader:' babel-loader '，options3360 {babelrc3360 true，cachedirectory : true//启用缓存}}])，happy-babel就是要找到上面加载程序的id，但是因为webpack4是多线程的，这可能是多余的，太大的时候编译效果不测试。

还有这个

应在vue-loader版本15.0之后添加新的VueLoaderPlugin()

其他的升级到webpack4.0后还是有很多漏洞，

就像4之前的合并加载文件一样

新的网络包。优化。minchunk size plugin({ minchunk size : 30000 })，已集成到splitChunks中。如果它被重用，它将发生冲突并报告错误

因为之前没有注意用3升4，所以没有删除，所以想重新配置4的时候，要一步一步重新配置，不然很多错误都是莫名其妙的，然后往下看

if(！process.env.NODE_ENV) { for(让I=1；I 3；I) {//在生产环境中使用mini-css-extract-plugin覆盖样式加载器，会有冲突。配置模块规则。请使用[0]={ loader : minisextractorplugin . loader，}；//自动添加样式完成并释放config . module . rules[I]. use . splice(2，0，' postss-loader ')；} //css样式合并config.plugins.push(新的minissextract plugin({ filename : utils . asset path(' CSS/[name])。[chunk has :8]。CSS ')，}))}在生产环境中，它曾经使用extractplugin插件，现在已经改为minicssextractplugin。

在for循环中，vue、css、less、scss的第一个数组样式加载器主要被MiniCssExtractPlugin覆盖，否则会有冲突。

带有自动前缀的postss-loader应该放在后面，这也是执行顺序的问题

要在项目的最外层添加postss . config . js，内容是

模块。exports={ plugins :[require(' autoprefixer ')({ browsers 3360['最近20个版本']})]} require是一个自动完成css前缀的插件。最后20个版本指的是与主流浏览器兼容的最新20个版本，当然如果你想与某个浏览器的特定版本兼容，也可以写这个。

最近10个Chrome版本'，'最近5个火狐版本'，' Safari=6 '，' IE 8接下来是前面提到的px到rem和eslint的语法检查。是打开还是关闭在config.js中设置

Build.js就是在这里产生和打包的。操作是先清空原始输出目录，将静态文件复制到输出目录，然后打包

Const spinner=ora('开始构建生产环境.');spinner . start()；//清除输出目录RM ('-RF '，config . build . output path)；//将静态复制到输出目录utils.copydir('。/static/*，config . build . resources path)；webpack(webpackConfig)。run((err，stats)={ spinner . stop()；if(err)throw err；//输出编译结果process . stdout . write(stats . tostring({ colors : true，modules : false，children : false，chunks : false，chunk modules 3360 false，timing : false })' \ n \ n ')；});以上是使用单页或多页的常见代码块

Webpack4单页配置(单页)

单页应用的目录结构主要是这样的，和一般开发中vue项目的结构一样

build-view-index.html-404.html-build . js-config . js-dev-server . js-utils . js-web pack . base . conf . js-web pack . dev . conf . js-web pack . prod . con f . js src-concon cs-CSS-font-images-mixins-pages//page directory-router-store-app . vue-index . jsstatic-jquery mode _ modules查看构建中的配置文件。我讲了build.js，config.js，utils.js，webpack.prod.conf.js现在我们来讲一下webpack.dev.conf.js

const webpackkconfig=merge(basebpackkconfig，{ mode: 'development '，entry :[' web pack-hot-middleware/client？noInfo=truereload=true']。concat('。/src/index.js ')，devtool: 'eval-source-map '，output : { path : config . build . output path，filename: 'index.js '，}，module : { rules 3360[]}，resolve: {}，plugins: [ new webpack。HotModuleReplacementPlugin()，new Jarvis({ port: 1337 }) ]，devserver : { inline : true }，})；Webpack4.0增加了一个新的模式，叫做开发/生产，已经在不同的环境中进行了优化。您仍然需要访问这两种模式

process.env.NODE_ENV

关于页面热加载，直接使用webpack自带的热加载函数HotModuleReplacementPlugin，然后与入口文件src/index.js合并

[' web pack-热中间件/客户端？Noinfo=true reload=true']。noinfo并在concat('后重新加载。/src/index . js’)是可配置的。如果要继续添加参数，可以在这里添加，并送上门

然后打开热加载devserver: {inline3360 true}

输出中的路径路径是指打包的输出路径。webpack开发环境被打包到内存中，而不是真正打包。filename给出了一个固定的索引

这要写成html作为整个项目的入口，也就是说整个项目运行在这个index.js上，

插件中有一个新的Jarvis。这里的港口是1337。项目运行后，可以打开这个端口查看文件大小，项目是否运行不正确等。这个可视窗口还不错，适合双屏的同学。

接下来，看看webpack.prod.conf.js

const WebPACKconfig={ entry : { index : } ./src/index.js' }，//webpack4默认会去查找/src/index。js输出： {路径： config。建造。输出路径，公共路径： '/'，文件名： utils。资产路径(' js/[name]).[区块有：8]。js ')，chunkfilename : utils。资产路径(' js/[name]).[区块有：8]。js') }，mode :“production”，devtool :“false”，module: { rules: [] }，优化： { runtimechunk : {//获取页面共同引用的代码name: 'manifest' }，split chunk s 3360 { chunk s 3360 ' initial '，minChunks: 2，maxinitalrequests 3360 5，minSize: 30000，//maxinitalrequests 3360 3，automaticNameDelimiter: ' ~ '，cache group 3360 { venders 3: { name 333: ' venders '，test 3:/[\ \/]node _ modules[\ \/]引入索引。js minify : { remove comments : true，collapseWhitespace: true，removeattributequots : false } })，//css压缩新的optimizecsessplugin({ assetnameregexp :/\).css$/g，css处理器： require(' CSS nano ')，CSS处理器选项3360 { safe : true，丢弃注释： { removeall : true } }，canPrint: true })，]}；这里说下在输出下的publicPath，如果要把打包后的文件指向一个相对路径要加上/要不然生成出来的的入口文件会变成参考资料/js/xxx.js而不是我们期待的/resources/js/xxx.js再则图片的路径也会变成资源/图像/.巴布亚新几内亚，这样是无效的路径，当然这还是要看你用的是相对路径还是绝对路径了

来看下最佳化这个东西，这是webpack4新加的功能用于代码的合并策略，这里是对两个地方的射流研究…进行合并一个是新公共管理包一个是项目下的代码

cachegroups 3360 { vendors : { name : ' vendors '，test :/[\ \/]node _ modules[\ \/]/，priority: -10，enforce: true，}，default : { test :/[\ \/]src[\ \/]/，priority: -20，reuseExistingChunk: true } }这是符合合并规则条件的共同设置

组块： '初始，minChunks: 2，maxinitialrequests 3360 5，minSize: 30000，//maxinitialrequests 3360 3，automaticNameDelimiter: '~ '，也可以把他们拎到具体的合并对象下去做单独的规则设置

然后在插件下引用上面的合并后的射流研究…

新的html webpakpplugin({ filename :路径。加入(配置。建造。HTMl短路径，' index.html ')，模板：配置。建造。模板路径，inject: true，区块3360[' manifest '，' index']，//引入索引。js minify : { remove comments : true，collapseWhitespace: true，removeattributequots : false } })，区块它有如下三个模式，可自行调整

异步非同步(异步)表示只从异步加载得模块（动态加载import())里面进行拆分最初的表示只从入口模块进行拆分全部表示以上两者都包括再看下dev-server.js启动项入口

让端口=进程。环境。端口| |配置。戴夫。港口；const app=express()；app。使用(BodyParser。JSON())；app。使用(BodyParser。URL编码({扩展： true })；app.engine('html '，ejs ._ _快递);app.set('视图引擎，' html ')；app。set(' view '，路径。resolve(_ dirname，' view ')；app。使用(compression())；//开启gzip//webpack编译器常数编译器=web pack(WebPACKCONFIG)；//web pack-dev-服务器中间件const dev中间件=require(' web pack-dev-中间件')(编译器，{ //这里必填与工具配置的路径相同公共路径： webpackkconfig。输出。公共路径，stats: { colors: true，chunks: false，}})//热更新中间件const HotMeDIa=require(' web pack-hot-中间件')(编译器);//处理本地开发环境下的代理接口对象。密钥(配置。戴夫。代理表).forEach(函数(上下文){ const options=config。戴夫。代理表[上下文]；if(选项类型==' string '){ options={ target : options } } if(~ context。indexof('，'){ context=context.split('，')；} app.use(proxyMiddleware(上下文，选项));})app。使用(开发中间件)；app。使用(HotMeDIa)；//静态资源目录指向静电目录app.use(express.static(' ./static ')；app.get('/* '，function(req，RES){ RES . render(' index ')；});//无路由时跳转404app.get('* '，function(req，RES){ RES . render(' 404 ')；})app.listen(端口，函数(){ console.log('节点启动正在监听端口：',端口)})这里利用开发调用模板进行页面渲染

app。set(' view '，路径。resolve(_ dirname，' view ')；指向的是当前建设下的视图目录下的超文本标记语言文件，

开启热更新和开发接口代理

app.use(开发中间件);app。使用(HotMeDIa)；app.use(express.static(' ./static ')；指向本地的静态资源

比如本地的图片路径是/images/jpge.jpg，

在开发环境下访问就会变成http://localhost :8080/static/images/jpge。jpg，

app.get('/* '，function(req，RES){ RES . render(' index ')；});把所有路径直接指向到视图/索引。超文本标记语言下文件内容如下

尸体！-开发环境- div id='app'/div脚本类型=' text/JAVAScript ' src=' http : lib/jquery/jquery。量滴js /脚本脚本类型=' text/JavaScript ' src=' http : lib/bootstrap/js/bootstrap。量滴js /脚本脚本脚本类型=' text/JavaScript ' src=' http : index。js /脚本/bodyindex.js .就是之前的入口文件，必须要写进超文本标记语言文件里的，因为没有用html webpackkplugin做模板的映射，当真正在开发环境下使用(template.html)模板是这样子的

尸体！-生产环境- div id='app'/div脚本类型=' text/JavaScript ' src=' http :/resources/lib/jquery/jquery。量滴js /脚本脚本类型=' text/JavaScript ' src=' http :/resources/lib/bootstrap/js/bootstrap。量滴js /脚本/正文所以分了两个模板去渲染页面

webpack4多页配置（单一)

多页应用的目录结构

build-view-index . html-404 . html-build。js-配置。服务器。js-utils。js-web包。基地。糖膏剂js-web包。戴夫。糖膏剂js-web包。产品。糖膏剂js-src-components-CSS-font-images-mixins-pages//页面目录- new - index.js //入口新的。vue静态-jquery模式_模块构建目录下有三个文件有些改动

dev-server.js去掉了视图目录指向

因为是多页的，这里是获取科学研究委员会目录下的一级目录做为路由

//这个获取的是内存路径app.get('/:viewname '？函数(req，res，next){ var view name=req。参数。视图名称？req.params.viewname ' .html ' : ' main . html var file path=path . join(编译器。outputPath，视图名称)；编译器。输出文件系统。readfile(文件路径，函数(错误，结果){ if(错误){ res.send('找不到文件： '文件路径)。结束；返回；} res.set('content-type '，' text/html ')；res.send(结果);RES . end()；});});然后是webpack.dev.conf.js里加了这一段

让entryObj=utils。getfilename()；Object.keys(entryObj).forEach((name)={ webpack kconfig。条目[名称]=[' web pack-hot-中间件/客户端？noInfo=truereload=true'].concat(Entryobj[name])；let plugin=new HTMlWebPackplugin({ filename : name ' .' html '，模板：配置。建造。模板路径，inject: true，chunk s 3360[name]})；webpackkconfig。插件。push(插件)；})获取科学研究委员会目录下的每个文件做为入口进行模板渲染

同样在webpackprod.conf.js也需要加上

让entryObj=utils。getfilename()；Object.keys(entryObj).forEach((name)={ webpackconfig。entry[name]=Entryobj[name]；let plugin=new HTMlWebPakPlugin({ chunk s :[' manifest '，name]，filename: name ' .' html '，模板：配置。建造。模板路径，inject: true，environment: 'resources '，minify 3360 { remove comments : true，collapseWhitespace: true，remove attributes quots : false } })；webpackkconfig。插件。push(插件)；})这里多了一个环境他是插入模板的一个变量，为区分开发和生产环境路径

尸体！-生产环境- div id='app'/div脚本类型=' text/JAVAScript ' src=' http :%=HTMlWebPackLugin。选项。环境%/lib/jquery/jquery。量滴js /脚本脚本类型=' text/JAVAScript ' src=' http :%=HTMlWebPackLugin。选项。环境%/lib/bootstrap/js/bootstrap。量滴js /脚本/正文以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。