Develop Reference

webpack duplicate work during serving files

I've just faced to unpredictable situation during using custom webpack config.
I will try to explain the problem.
This is my simple app (file index.js):
console.log('!!this', this);
This is my webpack config (file webpack.config.js):
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
additionalData: `#import './src/constants/global';`,
},
},
],
},
{
test: /\.(png|svg|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: { name: 'img/[name].[ext]' },
},
'image-webpack-loader',
],
},
],
},
};
This is my npm script for launching the app (file package.json):
"scripts": {
"dev": "webpack serve --config webpack.config.js",
},
As a result I see the next picture - all code executes twice (index.js, VM787 index.js).
In addition to that, if I use data fetching callback in my app with this configuration, I will see two equal requests in the Network tab.
Who knows what is the reason for that and how to resolve it?
Thanks!

This might be result of StrictMode. It mounts, unmount and mount conponent again, to check if everything is running correctly. Try removing it from index.js (just to check). Mind that it's useful for its purpose, and it only has this behaviour in dev mode.

If you're importing JavaScript into an HTML file yourself, you'll need to disable injection in the HtmlWebpackPlugin:
new HtmlWebpackPlugin({
template: './public/index.html',
inject: false,
}),

Moving from webpack v1 to v2

I'm trying to migrate my code from webpack v1 to v2 and add in the sass-loader, however I get the error
throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
I'm very confused as to what the final file is supposed to look like:
let webpack = require('webpack');
let path = require('path');
module.exports = {
devtool: 'eval-source-map',
entry: [
'./src/index'
],
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}],
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/
},
resolve: {
extensions: ['.js'],
options: {
enforceExtension: false
}
},
output: {
path: path.join(__dirname, '/dist'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true,
historyApiFallback: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.LoaderOptionsPlugin({
debug: true,
options: {
context: __dirname
}
})
]
};
At the moment the code is a mix of the two versions. I am using webpack version 2.2.1. Thanks.

There are several things you need to change:
Your test: /\.js?$/ and the corresponding loader and exclude should be another object inside the rules array:
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
},
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
resolve.options does not exist, it is just resolve.enforceExtension directly:
resolve: {
extensions: ['.js'],
enforceExtension: false
},
And finally, although it's not an error but just a warning, new webpack.NoErrorsPlugin() is deprecated and has been replaced with:
new webpack.NoEmitOnErrorsPlugin()
Also if you haven't yet, you should have a look at the migration guide from the official docs https://webpack.js.org/guides/migrating/.

How to make webpack consume files

So I use Typescript with Webpack.
tsc compiles everything from .ts to .js and then I want to use webpack to make it usable by the browser. However the problem is that I still have all of these .js files lying around from tsc.
Is there some way to tell webpack:
"Pack all these things into a nice bundle, and destroy them after you're done!"

Yes, use the typescript loader for webpack.
The Configuration section of that page presents a sample webpack config
module.exports = {
entry: './app.ts',
output: {
filename: 'bundle.js'
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: ['.ts', '.tsx', '.js'] // note if using webpack 1 you'd also need a '' in the array as well
},
module: {
loaders: [ // loaders will work with webpack 1 or 2; but will be renamed "rules" in future
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{ test: /\.tsx?$/, loader: 'ts-loader' }
]
}
}
As a second real world example, here is the appropriate section from my personal webpack.config.js which also sets up babel and (p)react
module: {
rules: [
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
'ts-loader'
]
}
]
},
resolve: {
modules: [
__dirname,
'node_modules'
],
extensions: ['.ts','.tsx','.js'],
alias: {
'react': 'preact-compat/dist/preact-compat.js',
'react-dom': 'preact-compat/dist/preact-compat.js'
}
},

Yes, it's possible. I recommend using awesome-typescript-loader for this purpose.
const rootDir = path.resolve(__dirname);
const path = require('path');
module.exports = {
entry: {
boot: [path.resolve(rootDir, 'src', 'boot')]
},
output: {
filename: 'js/[name].bundle.js',
path: path.resolve(rootDir, 'build')
},
module: {
loaders: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
}
};
If you use 3rd party modules or libraries, it's also recommended to create separate bundle for vendor files and use webpack.optimize.CommonsChunkPlugin. Check out configuration of webpack-typescript-postcss-universal-starter to see how you can easily use it.

How to improve Webpack performance in Dev Environment?

How do i improve the webpack build time. Presently i am packing around 150 files. and taking around 15 secs(Which is too much time). And majority of time is being eaten up during "optimize chunk assets" which takes around 10 secs. Any way to bring this down to 3-4 secs max.
Or how do i disable the optimize step in webpack. I am not explicitly using any configuration for minifying/uglifying.
This is the Configuration i am using presently::
module.exports = {
context: __dirname,
entry: './js/main.js',
target: 'web',
module: {
loaders: [
{ test: /text!/, loader: 'raw-loader'},
{ test: /backbone/, loader: 'imports-loader?this=>window' },
{ test: /marionette/, loader: 'imports-loader?this=>window' },
{ test: /sprintf/, loader: 'script-loader' },
{ test: /\.css$/, loader: "style!css" },
{ test: /\.scss$/, loader: 'style!css!sass' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' }
]
},
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
alias: {
'text': 'raw'
}
},
output: {
filename: 'bundle.js',
library: 'require',
libraryTarget: 'this'
},
resolve: {
alias: alias,
root: path.join(__dirname, 'node_modules'),
extensions: ['', '.js', '.jsx']
},
externals: {
jquery: 'jQuery'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'root.jQuery': 'jquery',
'Backbone': 'backbone',
'_': 'underscore',
'Marionette': 'marionette',
'sprintf': 'sprintf'
})
],
devtool: 'source-map'
};
Thanks for the help in Advance.

There are a couple of optimizations you can do with your build.
First, as it is, you are parsing all the files in your node_modules through the jsx loader. You want to exclude them.
loaders: [{
test: /\.js$/,
loader: 'jsx-loader?harmony',
exclude: /node_modules/, // <---
}]
Second, all your vendor files (which don't change during development) are compiled on every file change. That's not very efficient, you should separate the vendor files from the application code by using the CommonsChunkPlugin.
In essence, you have to add:
config.entry = {
app: './js/main.js',
vendor: ['react', 'moment', 'react-router', /* etc. all the "big" libs */],
};
config.output = {
filename: '[name].js', /* will create app.js & vendor.js */
};
config.plugins = [
/* ... */
new webpack.optimize.CommonsChunkPlugin(
/* chunkName= */"vendor",
/* filename= */"vendor.bundle.js"
),
];

Webpack offers many devtools: https://webpack.github.io/docs/configuration.html#devtool
you are using devtools: 'source-map'.
I changed to devtools: 'cheap-eval-source-map' and the chunk asset optimization goes from 4500ms to 306ms, and with devtools: 'eval' goes to 1ms.
Take note that both are not Production Suported, because the final .js file is too big, in my case is 13MB.

Webpack: Loading images from html templates

I'm trying to set up an angular project using Webpack but I can't figure out how to reference images from within html templates and have them included in the build.
My project tree is as follows:
package.json
app/
- images/
- foo.png
- scripts/
- styles/
- templates/
I'm trying to use html-loader along with url-loader and file-loader but it's just not happening.
This is an example template: app/templates/foo.html
<img src="../images/foo.png" />
Problem #1: I would like to be able to reference images relative to app/. Right now, the paths need to be relative to the template file and this will get ugly very quickly (../../../images/foo.png).
Problem #2: Even if I specify the relative path, as I have done above, the project builds successfully but nothing really happens. The paths are left as-is and no images appear in dist/.
Here is my webpack config:
var path = require('path');
var webpack = require('webpack');
var ngminPlugin = require('ngmin-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
module.exports = function(config, env) {
var appRoot = path.join(__dirname, 'app/')
if(!env) env = 'development';
var webpackConfig = {
cache: true,
debug: true,
contentBase: appRoot,
entry: {
app: path.join(appRoot, '/scripts/app.coffee')
},
output: {
path: path.join(__dirname, 'dist/),
publicPath: '/',
libraryTarget: 'var',
filename: 'scripts/[name].[hash].js',
chunkFilename: '[name].[chunkhash].js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader?outputStyle=expanded&includePaths[]=./node_modules/foundation/scss/')
},
{
test: /\.coffee$/,
loader: 'coffee-loader'
},
{
loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './app')) + '/!html'
},
{
test: /\.png$/, loader: "url-loader?limit=100000&mimetype=image/png&name=[path][name].[hash].[ext]"
},
{
test: /\.jpg$/, loader: "file-loader?name=[path][name].[hash].[ext]"
},
{
test: /\.(woff|woff2)(\?(.*))?$/,
loader: 'url?prefix=factorynts/&limit=5000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?(.*))?$/,
loader: 'file?prefix=fonts/'
},
{
test: /\.eot(\?(.*))?$/,
loader: 'file?prefix=fonts/'
},
{
test: /\.svg(\?(.*))?$/,
loader: 'file?prefix=fonts/'
},
{
test: /\.json$/,
loader: 'json'
}
]
},
resolve: {
extensions: [
'',
'.js',
'.coffee',
'.scss',
'.css'
],
root: [appRoot],
},
singleRun: true,
plugins: [
new webpack.ContextReplacementPlugin(/.*$/, /a^/),
new webpack.ProvidePlugin({
'_': 'lodash'
}),
new ExtractTextPlugin("styles/[name].[chunkhash].css", {allChunks: true}),
new HtmlWebpackPlugin({
template: appRoot + '/app.html',
filename: 'app.html',
inject: 'body',
chunks: ['app']
})
],
devtool: 'eval'
}
if(env === 'production') {
webpackConfig.plugins = webpackConfig.plugins.concat(
new ngAnnotatePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new webpack.DefinePlugin({
'process-env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin()
);
webpackConfig.devtool = false;
webpackConfig.debug = false;
}
return webpackConfig;
}

If you are using HTML templates in Webpack 2, in addition to use the file-loader you need to change in your HTML:
<img src="../images/foo.png" />
to this
<img src=<%=require("../images/foo.png")%> />

Yes, you will have to do so for loading images from different path.
I had similar issue and I resolved this using file loader:
.
loaders: [{
// JS LOADER
test: /\.js$/,
loader: 'babel-loader?optional[]=runtime',
exclude: /node_modules/
}, {
// ASSET LOADER
test: /\.(woff|woff2|ttf|eot)$/,
loader: 'file-loader'
},
{
//IMAGE LOADER
test: /\.(jpe?g|png|gif|svg)$/i,
loader:'file-loader'
},
{
// HTML LOADER
test: /\.html$/,
loader: 'html-loader'
},
{
//SCSS LOADER
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader?indentedSyntax"]
}
]
Good Luck

For Webpack 5 you have to write this way:
module: {
rules: [
// other stuff above.....
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
}
]
}
]
}

With Webpack 4, I was able to solve this problem by updating by html-loader to specify the root for my files. So given #syko's original structure; in webpack.config.js...
module: {
rules: [
// other stuff above.....
{
test: /\.html$/,
use: [
// ...The other file-loader and extract-loader go here.
{
loader: 'html-loader'
options: {
// THIS will resolve relative URLs to reference from the app/ directory
root: path.resolve(__dirname, 'app')
}
}
]
}
]
}
This tells the html-loader to interpret all absolute urls from the /app folder. So in our app/templates/foo.html, you can then use the following...
<img src="/images/foo.png" />
This then tells html-loader to see the above as path.resolve(__dirname, 'app', 'images', 'foo.png'). Then if you have extract-loader and/or file-loader, all the paths should be correct.
Managed to get this solution after hammering away at it for a while. The biggest confusion is where about in the loader stack the /images/foo.png is interpreted, in this case it starts at the html-loader plugin. Everything else after that, is more about how the image files are to be published.
Hope that helps.

You can use file-loader to extract images. Then using html-loader you can specify which tag-attribute combination should be processed by this loader via the query parameter attrs.
I could make it work with this configuration:
{
test: /\.(jpe?g|png|gif|svg|ico)$/i,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
}]
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: ['img:src', 'link:href']
}
}
}
Or in angular something like this:
attrs: [':ng-src', ':ng-href']