Develop Reference

Webpack: Style tag per required css file

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

Webpack2 - How to require an image from HTML

Webpack claims to manage module dependencies including image files. I understand that the following webpack config allows me to require jpg files from JS/CSS:
module.exports = {
module: {
rules: [
{
test: /\.jpg$/,
use: [ 'file-loader' ]
}
]
}
}
using url(/image.png) or require('./image.png'), but how would I include an image from an HTML file?
<img src="/image.png">
I know I can use copy-webpack-plugin to copy over static files into the output directory, but I'm wondering if there is a way to require images directly from HTML.

'html-loader' will do this for you by default, however if you are reading this behavior from your main index.html page, you will need to make webpack treat it as module also. Luckily html-webpack-plugin can do this for you in conjunction with html-loader: html-webpack-plugin.

let webpack output individual compiled files besides bundle

I'm using the webpack loader ts-loader to compile typescript sourcefiles into a javascript bundle. Now I would like the individualy compiled javascript files also to be saved, as well as the bundle! I'm familliar with writing a very simple webpack plugin, but I'm not sure as to how to go about implementing this. That is: I don't know which events triggered by webpack to listen to and where to find the relevant data. Any help?

As I commented, you can't use webpack compiled individual files. It might break with Uncaught ReferenceError: __webpack_require__ is not defined.
It's better write your own loader or ask the ts-loader to provide the option to retain the transpiled source.
Or i have written a loader which can save the typescript compiled files as individual files.
you can use this loader second loader or post-loader as shown below
as a second loader:
module: {
loaders: [{
test: /\.ts?$/,
loaders: ['scatter-loader', 'ts-loader']
}]
}
or as a post-loader
module: {
loaders: [{
test: /\.ts?$/,
loaders: ['ts-loader']
}],
postLoader: [{
test: /\.ts?$/,
loaders: ['scatter-loader']
}]
}
Note: scatter-loader work is in progress.

Webpack - Using Script Loader in webpack.config.json

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

Webpack angularjs copy angularjs templates but don't include in javascript bundle

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