What I'm trying to do is configure webpack in a way that would copy all the partial html templates that are required in angular 1.x directives etc. into a separate folder (just like the file-loader does for assets referenced from css). I don't want the partial htmls to be included in my javascript bundle but rather have all of them in one folder with hashed names.
I tried configuring the file-loader to do it but when I run webpack in watch mode it also copies the those html in the dist folder again to it appending a new hash and essentially makes an infinite loop as every new html that shows up in that folder is copied, thus a new html appears and again and again. I tried to set an exclude matching pattern for that loader but webpack was still running constantly watching over that folder.
Here is the excerpt of my webpack.config.js file:
module: {
loaders: [
test: /\.html$/,
exclude: /bundle\/templates/,
loader: `file-loader?name=bundle/templates/[name]-[hash].[ext]
]
}
is there a loader that would help me do what I want without resorting to hacks?
Ok I have found the answer. The problem wasn't the file-loader which is configured correctly like this even without the exclude. What caused the infinite loop was a dynamic require that created a regex that matched those copied assets too... So by setting a proper context for this dynamic require the problem was resolved.
In the webpack.config file you can use the same way like this in the loader section.
{
test: /\.html$/,
exclude: path.resolve(__dirname, 'index.html'),
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'views/'
}
},
And in the plugins section of the webpack.config file
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
inject: true
}),
new ExtractTextPlugin('bundle.css')
]
This will copy all the htmls and will be refered from the index.html
Related
I want to have one tag per required .css file.
I want it like that because I want to connect chrome dev-tools workspace feature to my src folder, so I could edit my css files directly from the browser.
Here's my research on loaders:
style-loader only loads into style tags
style-loader/url + file-loader doesn't work (I tried the README example)
extract-text-webpack-plugin seems to only generate ONE bundle per ALL css files with default configuration.
The Modify Files section in extract-text-webpack-plugin suggests that with multiple entry points, it's possible to generate multiple bundles, so I thought that it might be possible to abuse this feature to get the behaviour I want.
This is of course for development and I don't intend on serving my css this way.
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('[name].css'),
new HtmlWebpackPlugin({
template: 'path/to/your/index.html',
})
],
resolve: {
extensions: [ '.js', '.css' ]
}
Then in your js files, do import path/to/your/stylesheet.css; for each stylesheet you want webpack to extract.
Note: you need to install html-webpack-plugin and add it like above so that webpack can insert references to your stylesheets. Click HERE to learn more about the options for HtmlWebpackPlugin
I have bundled my app code using webpack 2. Used require statement on my main module to embed an SCSS file.
require('./styles/styles.scss');
While things work fine in all browsers, there is a FOUC (Flash Of Unstyled Content) visible when loading the application.
Is it the way all webpack modules load since CSS files are injected dynamically to header or am I doing something wrong in webpack config?
Here is a snippet of webpack config - loader section:
{
test: /\.scss$/,
loaders: [ 'style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap' ]
}
Albeit this isn't causing any side effects but would be better if avoided.
Thanks.
Right now your styles are baked into the JS files. In your case, the browser takes a while to parse the javascript and only after processing it can apply the styles to the page. That is causing the FOUC.
To cope with this problem ExtractTextPlugin was developed. Basically what it does is it takes out the css specified and puts it in a separate css file. A basic configuration would look like:
const plugin = new ExtractTextPlugin({
filename: '[name].[contenthash:8].css',
});
module: {
rules: [ {
test: /\.css$/,
use: plugin.extract({
use: 'css-loader',
fallback: 'style-loader',
})
}]
},
plugins: [ plugin ]
Then you must attach the generated file to your HTML page if you're not using html-webpack-plugin. By linking generated file in section you will get rid of FOUC.
I have the following weback loader:
loaders: [
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
]
I am storing all my svgs in a /res/ folder, but when I build my project I cannot access my resources with:
<img src="img.svg" />
What could be wrong with my loader?
Without more detail, as to where that snippet of HTML is actually being used or how the rest of your webpack config is setup, my best guess is that you need to actually require the .svg file so that webpack will process it.
var svgImage = require('./img.svg');
/// svgImage can now be used in a template
When webpack runs your files through the are various loaders you have installed and will create a new file named to a hash: img.svg -> {someHash}.svg
This can be overridden in your webpack config.
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml&name=img-[hash:6].svg'}
I have following folder setup:
app/
scss/
lib/
grid.css
main.scss
webpack/
webpack.config.js
in my webpack.config.js I have following loaders to handle scss and css:
{
test: /\.(css|scss)$/,
exclude: path.join(__dirname, '..', 'app/scss/lib/'),
loader: ExtractTextPlugin.extract(
'style-loader', 'css-loader?module!resolve-url!postcss-loader!sass-loader?sourceMap'
)
},
{
test: /\.(css|scss)$/,
include: path.join(__dirname, '..', 'app/scss/lib/'),
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}
idea here is that css-loader uses modules essentially rewriting a class name like .red to something random like .JHSKJasdasa however, I want it to exclude /lib folder and leave classes that are in it same as they are (vanilla), however still, classes inside grid.css like .container become randomized.
Likely answer is that webpack is getting confused by the path.join - documentation specifies path.resolve. I think it might do a straight string comparison of the paths, so the relative .. is breaking it, therefore the exclusion/inclusion isn't working correctly. path.resolve should resolve to the absolute path.
If that doesn't work, try adding a folder app/scss/src (or similar) to separate out the code you want to use css-loader on. Then include that rather than excludeing lib.
I am just starting to dip my toes into the world of webpack. I am using the awesome Vue.js with vueify, so therefore my modules are ES6.
One difficulty I am having is loading some 3rd party jQuery plugins. I am using the ProvidePlugin to load jQuery - which works fine.
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
I then have a directory called plugins containing misc jQuery plugins. My understanding is the script loader just loads these into the bundled file as strings, and they are eval-ed when the bundle loads. These scripts can then be used as if they were loaded in a regular script tag (i.e., no import needed).
But I just cant get any of the plugins to work. Below is my loaders array. What I am doing wrong (or not doing)?
loaders: [
// process *.vue files using vue-loader
{
test: /\.vue$/,
loader: 'vue'
},
// process *.js files using babel-loader
// the exclude pattern is important so that we don't
// apply babel transform to all the dependencies!
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /plugins\.js$/,
loader: 'script-loader' #tried script too
}
]
I can sympathize with the difficulty of getting jQuery plugins to work with webpack. While I don't have a solution to this specific configuration, I have found it useful to use a cdn to keep development rolling along until further troubleshooting can be done. Below is an example.
In your .html template file:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
In index.js or whatever your main entry point is:
import $ from 'jquery'
In your webpack config:
externals: {
jquery: 'jQuery'
}
Since this approach involves direct use of script tags it may work more reliably, while temporarily sacrificing opportunities for optimization and bundling.
new webpack.ProvidePlugin({
'React': path.resolve(__dirname, "node_modules/react/react"),
'ReactDOM': path.resolve(__dirname, "node_modules/react-dom/dist/react-dom"),
"jQuery": path.resolve(__dirname, "node_modules/jquery/dist/jquery"),
"$": path.resolve(__dirname, "node_modules/jquery/dist/jquery")
})
resolve you lib path