webpack-file-loader

Unexpected [path] in file-loader

梦想与她 提交于 2019-12-05 09:56:26
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 I tell the file-loader that output path needs to be relative to /src and not / ? After 2 days of trial

Displaying a static image using React, Typescript and Webpack

穿精又带淫゛_ 提交于 2019-12-05 08:10:37
I'm attempting to display an image in a React component as part of a project using webpack and webpack-dev-server. So far I have completed the following steps: Used npm to install file-loader Updated webpack.config.js to add a loader for image files Imported the image I want into my component Used the import in my img tag Having taken these steps, webpack fails to compile with a 'cannot find module' error: ERROR in [at-loader] ./src/components/App.tsx:4:26 TS2307: Cannot find module '../images/kitten-header.jpg'. My folder structure is as follows: /dist /images kitten-header.jpg bundle.js

Webpack is not copying images to dist folder

旧巷老猫 提交于 2019-12-01 06:28:28
I'm starting with webpack, but I'm really new on this and I'm stuck right now. My project copies my fonts correctly but not images. Now the only way I am able to make it work is by copying my images manually to the dist/img folder. This is my config: var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var webpack = require('webpack'); var path = require("path"); module.exports = { entry: './src/app.js', output: { path: path.resolve(__dirname + '/dist'), filename: 'app.bundle.js' // publicPath: '/dist', }, module: { rules:[ {

webpack html-loaders lowercase angular 2 built-in directives

♀尐吖头ヾ 提交于 2019-12-01 04:26:53
I am using html-loader to load my html template and file-loader to load my images that are in the template. This run just fine in dev but when I run build:prod and run the output, I get a template parse error. It appears that all angular2 built-in directives (e.g., *ngFor, *ngIf) are all converted to all lowercase (e.g., *ngfor, *ngif) which cases the error. I tried create a separate project and this time, not using any built-in directives from angular 2, everything works fine. Is there another loader I can use? How do i correctly load these templates along with the images used by these

Webpack is not copying images to dist folder

拥有回忆 提交于 2019-12-01 03:51:24
问题 I'm starting with webpack, but I'm really new on this and I'm stuck right now. My project copies my fonts correctly but not images. Now the only way I am able to make it work is by copying my images manually to the dist/img folder. This is my config: var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var webpack = require('webpack'); var path = require("path"); module.exports = { entry: './src/app.js', output: { path: path

webpack html-loaders lowercase angular 2 built-in directives

馋奶兔 提交于 2019-12-01 02:40:49
问题 I am using html-loader to load my html template and file-loader to load my images that are in the template. This run just fine in dev but when I run build:prod and run the output, I get a template parse error. It appears that all angular2 built-in directives (e.g., *ngFor, *ngIf) are all converted to all lowercase (e.g., *ngfor, *ngif) which cases the error. I tried create a separate project and this time, not using any built-in directives from angular 2, everything works fine. Is there

Url-loader vs File-loader Webpack

ε祈祈猫儿з 提交于 2019-11-28 20:54:30
问题 I'm trying to figure out the difference between url-loader vs file-loader. What does DataURl mean? The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit. 回答1: url-loader will encode files to base64 and include them inline rather than having them loaded as separate files with another request. A base64 encoded file may look something like this: data:;base64,aW1wb3J0IFJlYWN0IGZ... This would be added into your bundle. 回答2: Just wanted to add