Hy,
i have /images folder with /static sub-directory with some images.
how i can config webpack to make public avaiable images from images/static on path dist/images/image-name.png, and preserve names?
thank you
You can use CopyWebpackPlugin to copy all the files to required folder of your build.
plugins: [
new CopyWebpackPlugin([
{ from: 'src/images/static', to: './dist/images' }
])
]
Later you you have to import them like this.
<img src="path/to/dist/image.png">
Otherwise you can use file-loader to make the file URL available for programmtic usage
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: "file-loader?name=/images/[name].[ext]"
}
and your images will be emitted to:
dist/images/
Later you can import images like this:
import url from './file.png'
<img src={url}>
Related
I am new to Webpack. I understand basic concepts of bundeling, code-splitting and chunks, etc.
Now I am trying to sprinkle "Webpack magic" into a legacy angularjs app that uses ui-router. So I downloaded the following sample app from ui-router team:
https://github.com/ui-router/sample-app-angularjs
In the index.html file I see 2 js files references:
<script src="_bundles/vendors~sampleapp.js"></script>
<script src="_bundles/sampleapp.js"></script>
And In the webpack.config.js:
entry: {
"sampleapp": "./app/bootstrap/bootstrap.js", }
...
optimization: {
splitChunks: { chunks: 'all', },
},
In the entrypoint bootstrap.js there're the following imports:
// Each module registers it states/services/components, with the `ngmodule`
import "../global/global.module";
import "../main/main.module";
import "../contacts/contacts.module";
import "../mymessages/mymessages.module";
import "../prefs/prefs.module";
So, all the vendor imports happen in ngmodule.js, but bootstrap.js doesn't import it. And as far I can see it's not referenced in any other modules. Now README does mention something about "oclazyload"
ocLazyLoad is used to lazy load the angular module
But it's not clear how it happens or where it's configured. So my questions:
How does ngmodule.js gets bundled into the vendors.js
How does Webpack know that it needs to go into vendor chunk?
How does Webpack know that it needs to go into vendor chunk?
Well it is directly imported in index.html) Beside this bootstrap.js imports ga.js, ga.js imports ngmodule.js
How does ngmodule.js gets bundled into the vendors.js
vendors.js is generated with default optimization.splitChunks (https://webpack.js.org/plugins/split-chunks-plugin/)
...
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
}
...
so ngmodule.js wont go into vendor itself, but imports from node_modules will.
in a nuxt layout (default.vue) I want to load an image and a css file from assets folder
the image loaded successfully, but the css file not, why?
/layouts/default.vue
<template>
<img src="~assets/photo.jpg" />
<!-- converted to /_nuxt/assets/photo.jpg and loaded successfully -->
</template>
<script>
export default{
head:{
link: [ { rel: 'stylesheet', href: '~assets/style.css' }]
}
}
</sript>
when I view the source code:
<link href="~assets/style.css" />
and it fails to be loaded
also navigating to http://localhost:3000/_nuxt/assets/style.css faild, but http://localhost:3000/_nuxt/assets/photo.jpg successed
note:
I don't want to put style.css in 'static' folder as I want to load it via webpack css-loader to add caching hashes
The image src is automatically compiled by Vue, you can see more at relative path import; From the docs:
all asset URLs such as <img src="...">, background: url(...) and CSS
#import are resolved as module dependencies.
For a custom path besides cases listed above, you need to explicitly require the path for it to be compiled as a path to static assets:
export default{
head:{
link: [{ rel: 'stylesheet', href: require('~assets/style.css') }]
}
}
Could you help me with including static image in html template.
I generated project using jhipster generator (chosen Angular 2) and now I'm trying to include static image in html-template of component (for example for NavbarComponent into navbar.component.html). I inserted tag image into navbar.component.html
<img src="url" />
My image is placed into webapp/content/images/staticimage.jpg (this folder containts logo-hipster.png also). What do I have to place instead of url in img tag to see my image?
P.S. the inital structure of generated project wasn't changed.
This issue was related to version of generator-jhispter (the version was 4.0.8 for my case), where webpack config wasn't set properly.
After upgrade of generator-jhipster (it's 4.3.0) the issue has gone off.
As I understood this issue also might will be fixed if you change in webpack.common.js next rule
{
test: /\.html$/,
loader: 'raw-loader',
exclude: ['./src/main/webapp/index.html']
},
New version of generated project brought me the next:
{
test: /\.html$/,
loader: 'html-loader',
options: {
minimize: true,
caseSensitive: true,
removeAttributeQuotes:false,
minifyJS:false,
minifyCSS:false
},
exclude: ['./src/main/webapp/index.html']
},
And also you have to check out there is 'html-loader' in our devDependencies of package.json.
And now tag <img src="../../../content/images/staticimage.jpg"> works properly.
Everytime I open file with vim, webpack detects changes and recompiles the code. Vim creates temporary files like .test.txt.swp which makes webpack believe something has changed in the project.
Disabling swp file creation helped, but I would like to remain safe with swp files and not get distracted with browser reloading the page too often, nor with unnecessary code compilation.
How to make webpack know it should not react for .*.swp files changes?
EDIT:
It is actually webpack-dev-server which reacts to new vim swap files detected. And it does it only when there are specific entries in source files that are about to be compiled. Examples are from importing angular2, but not only it:
import '#angular/core';
import '#angular/common';
I know nothing about "webpack", but you can tell Vim to store swap files in a single directory instead of the current directory with the 'dir' setting. I use this in my vimrc:
set dir=$HOME/.vim/tmp/swap
if !isdirectory(&dir) | call mkdir(&dir, 'p', 0700) | endif
This will also fix issues with other tools, as well as "dangling swap files", swap files in VCS systems, etc.
If you want to ignore Vim swap files in tools (such as webpack) then remember that just ignoring .swp is not enough; Vim may also create swap files with extensions such as .swo, .swn, etc.
You can exclude files based on a pattern:
module: {
loaders: [
{
// existing loader config
exclude: /\.swp$/,
},
]
}
You shouldn't be bundling everything by default, though; use a loader test to only bundle .js files (or whatever you explicitly needs; .jsx, .css, etc.). Something like this, for example:
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: [/node_modules/, 'test/', /\.swp$/],
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
]
}
The answer for me was the following change in the webpack configuration
<webpackConfObject>.devServer.watchOptions = {
ignored: /\.sw.$/
};
The exclude attribute of modules does not apply to the file watcher that triggers an event to reload the page on the webpack dev server, but you can ignore files that match a pattern.
file structure
assets/js/
- build/
- plugin/
jquery.min.js
- src/
index.js
config.js
builds.js
require.js
assets/js/src/index.js
requirejs(['jquery']);
assets/js/config.js
requirejs.config({
baseUrl: './',
paths: {
jquery: 'plugin/jquery.min'
}
})
If I want to use r.js to optimize the file, just execute r.js -o config.js name=src/index out=build/index.js, the r.js will compile a file into build/index.js with optimization and dependency, but there will be many files need to compile in the future, so I create a builds.js
assets/js/builds.js
({
appDir: 'src',
dir: 'build',
mainConfigFile: 'config.js',
modules: [
{name: 'index'}
]
})
If I run r.js -o builds.js, I will got wrong path message.
Error: Error: ENOENT: no such file or directory, open 'D:\www\r\build\plugin\jquery.min.js'
I need to go back to config.js, and edit the path relative to src.
requirejs.config({
baseUrl: './',
paths: {
jquery: '../plugin/jquery.min'
}
})
It will work, but is it possible to write one config file for both purpose?
Specify paths again in the build file, relative to /src.
builds.js
({
appDir: 'src',
baseUrl: './',
dir: 'build',
modules: [
{name: 'index'}
],
paths: {
jquery: '../plugin/jquery.min'
}
})
The paths in the build file work differently than in the config file.
The appDir option of /src specifies that all your scripts are located in /src, however your config.js and folder structure have the /plugins outside of /src.
When the jquery path is resolved, the paths in the config.js file are used because the mainConfigFile option is used.
All module paths would need to be redefined in your build file in addition to your config file. This is because all module paths are resolved relative to the baseUrl, which is in relation to the appDir in the build file – this is the confusing bit.
Reference the following r.js example build file. https://github.com/jrburke/r.js/blob/master/build/example.build.js
The official doc on the RequireJS optimizer contains a helpful section about path resolution.
http://requirejs.org/docs/optimization.html#basics
Relative path resolution rules:
In general, if it is a path, it is relative to the build.js file used to hold the build options, or if just using command line arguments, relative to the current working directory. Example of properties that are file paths: appDir, dir, mainConfigFile, out, wrap.startFile, wrap.endFile.
For baseUrl, it is relative to appDir. If no appDir, then baseUrl is relative to the build.js file, or if just using command line arguments, the current working directory.
For paths and packages, they are relative to baseUrl, just as they are for require.js.