Develop Reference

How to dynamically load an asset (pdf) in an angular app using webpack?

I am trying to load a pdf into my angular app running on webpack dev server using HTML <object> tag with data attribute.
Since the pdf path is generated at run time and is absolute like C:\test.pdf.
It is not loaded into the UI but rather console logs the error -
Not allowed to load local resource: file:///C:/test.jpeg
However the production build of the app which doesn't run on hosting server but as static html works fine. Also, relative path works fine as well.
How can i load the pdf ?
webpack.common.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const rootDir = path.resolve(__dirname, '..');
module.exports = {
resolve: {
extensions: ['.js', '.ts'],
modules: [rootDir, path.join(rootDir, "node_modules")]
},
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[ext]'
},
{
test: /\.(scss|css)$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader",
options: {
includePaths: ["node_modules/"]
}
}
]
}
]},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)#angular/,
path.resolve(__dirname, '../src')
)
]
};
webpack.dev.js
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
const path = require('path');
const rootDir = path.resolve(__dirname, '..');
commonConfig.entry = {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
};
commonConfig.module.rules.unshift({
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader', 'angular-router-loader']
});
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: path.resolve(rootDir, 'dist'),
publicPath: 'http://localhost:8080/',
filename: '[name].js',
chunkFilename: '[name].chunk.js'
},
plugins: [
new ExtractTextPlugin('[name].css')
],
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});

You could tell the devServer from where to serve files.
devServer: {
historyApiFallback: true,
stats: 'minimal',
contentBase: ['./dist', 'C:\\']
}
Then you can load your file with <... src="/file_name.ext" ... />
But I would not recommend adding C:\ as contentBase. If you have the possiblity, define another output directory for your generated PDF.

Can't find bundle.js

I know this question has been asked before, but I honestly can't find the answer anywhere-- it appears as if I'm doing everything I should however bundle is not created. So I have this webpack.config.js file that's supposed to handle HMR + React, and typescript (with tsx syntax), but it's not creating the bundle. Throws no errors on compilation, and seems to be doing alright, but the bundle returns a 404 when I try to fetch it. Here's my file structure:
someApp/
src/
index.tsx
components/
Hello.tsx
dist/
webpack.config.js
...
And here's my webpack config:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index.tsx'
],
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js',
publicPath: '/public/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devtool: 'eval',
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
loaders: [
{
test: /\.tsx?$/,
loaders: [
'react-hot-loader',
'ts-loader'
],
include: path.join(__dirname, '/src')
}
],
preLoaders: [
{ test: /\.js$/, loader: 'source-map-loader' }
]
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
};
Another strange thing is that I think it might have something to do with executing this through node, since when I just run webpack by itself it compiles the bundle. Here's my code for starting up the server:
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
if (err) {
return console.log(err)
}
console.log('Listening at http://localhost:3000/')
})
Maybe I'm missing something, but I'm pretty new to webpack so any help would be amazing!

Thats because webpack-dev-server is serving bundle.js from memory. This is done to make serving bundle.js fast. You can add another webpack config for production that spits out bundle.js to disk
module.exports = {
entry: './src/index.tsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/public/'
},
.
.
.
and all your other modules, just don't include your dev-server
if you want to fetch bundle.js like localhost:3000//..../bundle.js
try this
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry:'./src/index.tsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/public/'
},
//plugins: [
// new webpack.HotModuleReplacementPlugin()
//],
devtool: 'eval',
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
loaders: [
{
test: /\.tsx?$/,
loaders: [
'react-hot-loader',
'ts-loader'
],
include: path.join(__dirname, 'src')
}
],
preLoaders: [
{ test: /\.js$/, loader: 'source-map-loader' }
]
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
};
EDIT: If you want to fetch bundle.js
you have to use what is defined in the publicPath: '/public/'. so for you the url you can fetch bundle.js from is this localhost:3000/public/bundle.js

I think you need to change your output to this:
output: {
path: path.join(__dirname, '/dist'), // <- change last argument
filename: 'bundle.js',
publicPath: '/public/'
},

Obscure bundle.js errors in React + Webpack though Debug=true is set in the webpack.config.js

For debug purposes, I would like to get the line number which produced the error but I am getting this:
It is referencing bundle.js though I've specified debug=true in the webpack.config.js:
var path = require('path')
var webpack = require('webpack')
module.exports = {
debug: true,
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
exclude: /node_modules/,
include: __dirname
}]
}
}
Anyway I can get the line number in the pre-compiled js?
I've tried adding pathInfo as this answer recommended but to no avail.

React and hmr, why Webpack ignores changes?

I'm trying to build my React project with Webpack using hot module replacement. But, Webpack ignores file changes. What am I doing wrong?
My config:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:4567',
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: [path.join(__dirname, 'src')]
}]
}
};
My files structure:
src
--app
----actions
----components
----constants
----reducers
----app.js
----config.js
--index.js
Hot module replacement works fine if module file is in "src" folder, otherwise nothing happens on changes.
Thanks!

Because you've set include in your webpack config.
You can change your config like this:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:4567',
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: [`all of your dirs you want to watch`]
}]
}
};

Favicon won't show, seems to be issue with webpack

I've got a React/Redux app and I'm using webpack to transpile my JSX and ES6 and load my stylesheets and images into my JS. My dev server is hosted on port 3000.
Here's my webpack.config.js:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./src/js'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
favicon: 'src/images/favicon.ico'
})
],
module: {
loaders: [{
test: /\.js$/,
loaders: [ 'babel' ],
exclude: /node_modules/,
include: __dirname
}, {
test: /\.less?$/,
loaders: [ 'style', 'css', 'less' ],
include: __dirname
},
{
test: /\.(otf|eot|svg|ttf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loaders: [ 'url' ],
include: __dirname
},
{
test: /\.(png|ico|gif)?$/,
loaders: [ 'file' ],
include: __dirname
}]
}
};
When I hit localhost:3000, everything that I would expect to be there is there, except my favicon. If I go to localhost:3000/static/favicon.ico, my favicon is there. Could use some expertise debugging this issue.

The browser will look for your favicon in localhost:3000/favicon.ico, so that's where it needs to be. Try rewriting the url to serve favicon.ico for the /favicon.ico route. For example, if you're using historyApiFallback, do:
historyApiFallback: {
rewrites: [
// shows favicon
{ from: /favicon.ico/, to: '[path/to/favicon]' }
]
}