出大问题!webpack 多入口&&html模板在后端

新公司前后端不分离,后端用的是php的twig

我用webpack做多入口文件的打包,虽然成功了。但是引入js和css是在twig上写死的根据文件名。

一开始没问题,因为就定死了那么几个global.js、local.js和global.css、local.css

但是遇到很大的字体和图片不能通过url-loader,只能生成文件。 (想念 html-webpack-plugin 能自动生成 HTML 文件,并自动引入打包后的 js 文件

不可能在后端模板上一个个引入图片和字体啊,报警了,出大问题。

原文地址:https://www.cnblogs.com/papi/p/11558727.html

时间: 2024-08-30 15:32:27

出大问题!webpack 多入口&&html模板在后端的相关文章

从 vue-cli 到 webpack多入口打包(一)

从三个插件开始 1.CommonsChunkPlugin commonsChunkPlugin 是webpack中的代码提取插件,可以分析代码中的引用关系然后根据所需的配置进行代码的提取到指定的文件中,常用的用法可以归为四类:(1).提取node_modules中的模块到一个文件中:(2).提取 webpack 的runtime代码到指定文件中:(3).提取入口文件所引用的公共模块到指定文件中:(4).提取异步加载文件中的公共模块到指定文件中.下面就具体说明以上四种用法. 1.1 提取node_

webpack(二) 根据模板生成简单的html文件

(一)使用webpack 根据模板生成HTML,首先需要安装插件 html-webpack-plugin. 在工程文件夹安装插件 命令如下: npm install html-webpack-plugin --save-dev (二) 新建 webpack.config.js,名称可以更改,更改后 运行时,需指定 配置文件名称. 例如,配置文件名为 my.webpack.config.js, 则需要在package.json 文件中,在scripts 处添加如下代码: "scripts"

Webpack系列:在Webpack+Vue中如何将对后端的http请求转到https的后端服务器中?

在上一篇文章(Webpack系列:在Webpack+Vue开发中如何调用tomcat的后端服务器的接口?)我们介绍了如何将对于webpack-dev-server的数据请求转发到后端服务器上,这在大部分情况下就够用了. 然后现在问题又来了,在生产环境下接口一般采用https协议,如果我们要把数据请求转发到生产服务器上怎么办? 首先会想是不是把上一篇博文中提到的proxyTable改成https就可以了,如下:     proxyTable: {                '/appserve

vue-cli的webpack模板项目配置文件分析

由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会"太折腾". 一.文件结构 本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容. ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-ser

Vue-Router路由Vue-CLI脚手架和模块化开发 之 Vue-CLI 2.x脚手架工具基于webpack simple模板与基于webpack模板构建项目

Vue-CLI 2.x脚手架工具基于webpack simple模板构建项目 vue-cli是一个基于vue.js进行快速开发的完整系统.基于webpack构建,并进行默认配置,可通过插件扩展,可升级: vue-cli帮我们创建基本项目结构,跳过繁琐的项目配置环节,将精力集中在业务上: vue-cli的版本: @vue/cli 3.x版本:点击前往官网 vue-cli 2.x版本:点击前往官网 安装vue-cli $ npm install -g vue-cli 安装成功,查看其版本: 使用we

webpack+react多页面开发(二)-终极架构

webpack4+react16多页面架构 webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常指的是将业务js,css打包到同一个html文件中,整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口,比如不同的h5活动,或者需要支持seo的官方网站,都需要多个不同的html.webpack-react-multi-page架构让你可以在多页面在项目开发中自动化打包新创建页面并保证每个页面都可以热更新 ,build打包后有清晰

webpack 4 简单介绍

webpack是什么? webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler). 为什么要使用webpack呢? 随着web技术的发展,前端开发不再仅仅是静态网页的开发,前端代码的逻辑和交互越来越复杂. 回想一下最初我们如何开发一个页面,切图.写样式.用JQuery写一写JS效果,页面开发完就能直接在浏览器里查看.我们手动编译(比如用koala编译less),手动压缩(比如用compress压缩css),手动对比代码(比如用compare对比代码).

从零构建vue项目(一)--搭建node环境,拉取项目模板

本文是基于vuecli2搭建的项目. 1. 下载安装nodejs     地址:https://nodejs.org/en/download/ 选择安装版windows .msi, 不要选择压缩版 下载完成后,下一步-->下一步-->安装完成 npm:  node pageage mangemen node.js的包管理器, 集成到node.js中了. 验证node是否安装成功: 打开命令行(windows)或终端(mac),在命令行(终端)中输入: node -v 如果提示出版本信息则说明n

【转】Webpack 快速上手(上)

嫌啰嗦想直接看最终的配置请戳这里 webpack-workbench (https://github.com/onlymisaky/webpack-workbench) 由于文章篇幅较长,为了更好的阅读体验,本文分为上.中.下三篇: 上篇介绍了什么是 webpack,为什么需要 webpack,webpack 的文件输入和输出 中篇介绍了 webpack 在输入和输出这段中间所做的事情,也就是 loader 和 plugins 下篇介绍了 webpack 的优化,以及在开发环境和生产环境的不同用