webpack-file-loader | 易学教程

Serving mp3 files using the webpack file loader

阅读更多关于 Serving mp3 files using the webpack file loader

问题 I have a problem with getting my mp3 files to work using the webpack file loader. This is the issue: I have a mp3 file on my harddisk, that if I open using chrome by for example "c:\somefolder\somemp3file.mp3" opens up in a tab in the browser and plays just fine. However, when I serve the exact same file using webpack it does not work. I have configured the loader in webpack like this: { test: /\.(gif|jpg|png|mp3|aac|ogg)$/, loader: 'file' } Then, when I'm trying to link to the file I require

How to properly load photos with Node and Webpack?

阅读更多关于 How to properly load photos with Node and Webpack?

问题 Should I be loading photos in node by importing relative paths or by referencing the file URL, and how do you properly load photos from their relative path? Currently I'm serving static files with express: server.use(express.static(__dirname + '/../public')); And loading photos by referencing file URLs: <img src='/images/tom.jpg'/> I have a webpack configuration set up to use file-loader on (png|jpg|gif), and the webpack docs say, that with file-loader, you can import photos from relative

How to get JSON content in EJS file [WEBPACK]

阅读更多关于 How to get JSON content in EJS file [WEBPACK]

问题 I want to get values from an external JSON file and use these values in my EJS file which is compiled as HTML by webpack. My JSON & EJS working properly. I trying things like that in my EJS : <%= require('./components/products.json') %> But the only output (in a HTML file) i get at the render is : "components/products.json" I've tried to use Fetch but at bundle time Webpack don't recognize it. And also tried to pass it in a variable but same result. The objective is to display images's URL

Webpack file-loader with sass-loader

阅读更多关于 Webpack file-loader with sass-loader

问题 I am new to nodejs and get a problem when trying to use sass with it. The following information is just fictional, but it represents the actual condition. THE SCENARIO: I have the following folder structure: frontend/ - scss/ - style.scss - main.js webpack.config.js Goal : I want to compile the style.scss to style.css using webpack and put it inside dist/frontend/css/ directory, so it should be resulting this path: dist/frontend/css/style.css and create the following folder structure: dist/ -

webpack 4 images in node_modules : module not found

阅读更多关于 webpack 4 images in node_modules : module not found

问题 The problem Im using webpack 4 to compile scss to css and MiniCssExtractPlugin to save the css into a different file. The problem is, that i dont manage to load images and fonts, that are included via url() inside of the scss files. It also makes no difference between running development or production. Scss is compiled perfectly and without any problems. Also the scss-loader has no problems loading .scss-files from node_modules. Why does this error occur and how can i fix it? error-message

Serve images dynamically with webpack

阅读更多关于 Serve images dynamically with webpack

问题 I have a question regarding webpack and serving images. I have a webpack config that build a React webapp and also serves .jpg files from a specific folder. But what happens if from my webapp I download and add a new image to this folder? Can I refresh webpack so that it will serve the new image and I will be able to import it with require.context ? Or, is it something that webpack is not supposed to do, and so I need to have this handled in the backend? Thanks, 回答1: This isn't something that

Webpack file-loader ignoring PNG files

阅读更多关于 Webpack file-loader ignoring PNG files

问题 I'm trying to output all image files through webpack file loader, webpack is ignoring images with PNG extensions however. Configuration works correctly on JPG files. My webpack config: const path = require('path'); const PATHS = { src: path.join(__dirname, 'src'), img: path.join(__dirname, 'src/img'), styles: path.join(__dirname, 'src/styles'), build: path.join(__dirname, 'build') } module.exports = { context: PATHS.src, entry: { script: ['./scripts/main.js', './styles/main.scss'], index: '.

Vue Cli 3 Local fonts not loading

阅读更多关于 Vue Cli 3 Local fonts not loading

问题 When trying to load custom local fonts in Vue CLI 3 the fonts still will not appear. I am not receiving any error messages. The inspector shows the correct rule being loaded, but fonts are falling back to serif on #app. Fonts are not showing up in my dist folder anywhere. I have tried adding loaders in vue.config.js, changing url paths, and moving the @font-face rules around to different locations, changing the public path to ' ' and '/', importing scss into main.js. Font loading: @font-face

Unexpected [path] in file-loader

阅读更多关于 Unexpected [path] in file-loader

问题 For my image location: /src/assets/bitmap/sample.jpg Given are the key configurations: context: resolve('src') output: { path: resolve('builds/web'), publicPath: '', filename: ifProd('[name].[chunkHash].js', '[name].js') }, ... loaders: [ { test: /\.(png|jpg|jpeg)/, loader: 'file-loader?name=[path][name].[ext]?[hash]' } ] I am expecting output structure for the image that looks like this: /builds/web/assets/bitmap/sample.jpg Instead, I get this: /builds/web/src/assets/bitmap/sample.jpg How do

Vue Cli 3 Local fonts not loading

阅读更多关于 Vue Cli 3 Local fonts not loading

When trying to load custom local fonts in Vue CLI 3 the fonts still will not appear. I am not receiving any error messages. The inspector shows the correct rule being loaded, but fonts are falling back to serif on #app. Fonts are not showing up in my dist folder anywhere. I have tried adding loaders in vue.config.js, changing url paths, and moving the @font-face rules around to different locations, changing the public path to ' ' and '/', importing scss into main.js. Font loading: @font-face { font-family: 'OpenSans-Regular'; src: url('/assets/fonts/OpenSans-Regular.eot'); src: url('/assets