Webpack

How to use the google font v2 API import url in sass file with webpack laravel mix?

由 时光总嘲笑我的痴心妄想 提交于 2021-02-10 15:40:19
问题 I'm trying to import a google font into my a sass file, right at the top before all other styles. I am using webpack laravel mix, and I am also using the google font v2 API link. @import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&display=swap"); The problem with the new css2 link, it contains semi-colons and creates css parse errors. The sass file actually compiles fine, but this is the output of the css file... @import url(https://fonts.googleapis.com/css2

Q: How to ensure vendor chunk hash doesn't change with webpacker?

由 非 Y 不嫁゛ 提交于 2021-02-10 15:00:55
问题 I have a Rails 6 project with webpacker 4.2.2 configured to split vendor chunks into individual files: # config/webpack/environment.js const { environment } = require('@rails/webpacker') const webpack = require('webpack') environment.config.merge({ plugins: [ new webpack.HashedModuleIdsPlugin(), ], optimization: { minimize: true, runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 0, cacheGroups: { // @see https://hackernoon.com/the-100-correct-way-to

Q: How to ensure vendor chunk hash doesn't change with webpacker?

由 隐身守侯 提交于 2021-02-10 14:59:31
问题 I have a Rails 6 project with webpacker 4.2.2 configured to split vendor chunks into individual files: # config/webpack/environment.js const { environment } = require('@rails/webpacker') const webpack = require('webpack') environment.config.merge({ plugins: [ new webpack.HashedModuleIdsPlugin(), ], optimization: { minimize: true, runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 0, cacheGroups: { // @see https://hackernoon.com/the-100-correct-way-to

Q: How to ensure vendor chunk hash doesn't change with webpacker?

由 我怕爱的太早我们不能终老 提交于 2021-02-10 14:58:45
问题 I have a Rails 6 project with webpacker 4.2.2 configured to split vendor chunks into individual files: # config/webpack/environment.js const { environment } = require('@rails/webpacker') const webpack = require('webpack') environment.config.merge({ plugins: [ new webpack.HashedModuleIdsPlugin(), ], optimization: { minimize: true, runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 0, cacheGroups: { // @see https://hackernoon.com/the-100-correct-way-to

Webpack: getting this error: build failed (from ./node_modules/css-loader/dist/cjs.js):

由 痞子三分冷 提交于 2021-02-10 14:53:17
问题 When running Webpack, I get the following error: ./src/css/main.css 3.62 KiB {0} [not cacheable] [built] [failed] [1 error] ERROR in ./src/css/main.css Module build failed (from ./node_modules/css-loader/dist/cjs.js): ... accumulator[normalizedUrl] = { ...accumulator[normalizedUrl], ^^^ ... webpack.config.js: module: { rules: [ { test: /\.css$/i, use: ['css-loader'] } ] } css: body { background-color:purple; } js: import css from '../css/main.css'; on js file, if I enter import '../css/main

webpack configuration: remove hash from *.js entry/bundle files names

由 一曲冷凌霜 提交于 2021-02-10 14:51:43
问题 I am doing a vue.js app. After build it generate a js file "background.2a548437.js" instead of the "background.js" that I want. I'm doing the webpack-chain configuration through the "vue.config.js" file. To diagnose, I'm reading the result of "$vue inspect", but I don't see which parameter should I tune to remove the hash from the js files. I do see patterns like 'img/[name].[hash:8].[ext]' but for js it's 'js/[name].js' Do you have any solutions or leads ? Context/Why: It uses webpack "^4.0

Why webpack converts require('path to img.png') in base64?

由 情到浓时终转凉″ 提交于 2021-02-10 14:38:48
问题 I have a chat, and a JSON file where all the history is stored. All images/video/audio link to require('path to media'). However, for some reason, when using vue-cli-service serve or vue-cli-service build, webpack skips my image which is used for Emoji, not including it in dist folder, but converting it to base64 string. JSON looks like this: { type: 'emoji', author: `me`, data: { src: require('../../Media/img/smiling-face.png') } }, { type: 'text', author: `me`, data: { text: `Do you read me

【CSS】343- CSS Grid 网格布局入门

由 爱⌒轻易说出口 提交于 2021-02-10 08:10:31
CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格。Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列。 它还能使我们在不改变任何HTML的情况下，使用 CSS 来定位和调整网格内的每个元素。它允许 HTML 纯粹作为内容的容器。 HTML 结构不再受限于样式表现，比如不要为了实现某种布局而多次嵌套，现在这些都可以让 CSS 来完成。 定义一个网格 Grid(网格) 模块为 display 属性提供了一个新的值： grid 。当你将任何元素的 display 属性设置为 grid 时，那么这个元素就是一个 网格容器(grid container)，它的所有直接子元素就成了 网格项(grid items)。 让我们创建创建一个 3×3 的布局，做一个 Tic-Tac-Toe (井字游戏) 棋盘。首先，我们将写一些 HTML： HTML 代码： <div class = "game-board" > < div class = "box" > </ div > <div class = "box" > </ div > <div class = "box" > </ div > <div class = "box" > </ div > <div class = "box" > </ div > <div class = "box" >

NPM: Field 'browser' doesn't contain a valid alias configuration

由 白昼怎懂夜的黑 提交于 2021-02-10 06:47:42
问题 Executing This: node .\node_modules\webpack\bin\webpack.js --config scripts/webpack.config.js --display-error-details Produces this error. I am just testing this at the moment, so application.ts just has this export class Aureus { constructor() { alert('1'); } } The webpack file looks as follows: const globule = require("globule"); const path = require("path"); const webpack = require("webpack"); const extractTextPlugin = require("extract-text-webpack-plugin"); const config = { }; const

Exclude specific packages from bundle in Webpack

由 佐手、 提交于 2021-02-10 06:47:16
问题 I am trying to find a way to exclude specific package of a subdepedency from my Webpack bundle. I tried many ways, my recent attempt is to (ab)use the externals options like: externals: [ function externals(context, request, callback) { if ( context.includes('ui-lib/node_modules/react-dom/') || context.includes('ui-lib/node_modules/d3/') || context.includes('ui-lib/node_modules/lodash/') ) { return false; } callback(); }, ], Without success, is any other way to achieve that? I have a vendors
订阅 Webpack