I'm coding with simple 'ol jQuery, sass, and html. I'm trying to create a simple PDF html download link, but I can't figure out how to compile pdf files using file-loader in my webpack config... and I'm wondering if file-loader is even the right dependency for this (I'm using version 1.1.6).
I've tried adding 'pdf' to 'test: /.(gif|png|jpe?g)$/' in my webpack.config.js file so that it reads 'test: /.(gif|png|jpe?g|pdf)$/' - it doesn't work. This was after deleting and reinstalling node_modules and dist. I also manually added the pdf file to my dist file to make sure it wasn't an issue with HTML or something. It did in fact work after that, but I'd like to get this thing to build in my webpack environment on its own.
//webpack.config.js file, using file-loader 1.1.6
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'eval-source-map',
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.(gif|png|jpe?g|pdf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/images/'
}
}
]
}
]
}
};
// HTML download link
<a href="./assets/images/filename.pdf" download>
<div class="this class">
<p>Linktext</p>
</div>
</a>
I expected my .pdf file to compile in the dist folder, but it doesn't appear.
My other image files are loading into the correct file path in my dist folder, but not the .pdf file, the .gif file, or (weirdly) a big .png file. I really only care about the .pdf file though. All other images are loading fine; they're all .png and jpeg files.
Related
I have html files located on different paths in src folder. I can read them at once with gulp.src(['path/to/file1','path/to/file2']) and output them such as gulp.dest('dist/') and it works fine. But what if I want to output the input files in different paths in the same gulp task?
project structure
src
- index.html
- pages
- about.html
// how I want to output
dist
- index.html
- pages
- about.html
My gulpfile.js for html task looks like
const filePath = {
input: 'src/',
output: 'dist/',
markup: {
index: 'src/index.html',
pages: 'src/pages/**/*.html',
outputIndex: 'dist/',
outputPages: 'dist/pages/'
}
}
function markup(done) {
src([filePath.markup.index, filePath.markup.pages])
// including src/layouts markup into index and pages markup files
.pipe(fileInclude({
prefix: '##',
basepath: '#file'
}))
// change references to files for build
.pipe(useref({noAssets: true}))
// minify on production
.pipe(mode.production(htmlmin(
{ collapseWhitespace: true, removeComments: true }
)))
.pipe(dest(filePath.output));
return done();
}
So far I have tried
.pipe(dest(filePath.markup.outputIndex));
.pipe(dest(filePath.markup.outputPages));
but it outputs both files in root dist as well as pages folder.
And with gulp-if
.pipe(gulpIf(filePath.markup.pages), dest(filePath.markup.outputPages))
.pipe(dest(filePath.markup.outputIndex));
but this also doesn't seem to work also this throws an error Error: gulp-if: child action is required.
I can do this by creating different tasks for index and pages but is there a way I can do it in a single gulp task?
File-Loader is not working properly for me, images are not showing up. My images are correctly placed in the dist/static/assets folder. So no issues on that.
This is my config:
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
options: {
context: 'src',
name: '[name].[ext]',
publicPath : 'static/assets',
outputPath : 'static/assets'
}
}
]
But the images in my source are converted to base64? And they don't work.
<img role="presentation" src="data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSAic3RhdGljL2Fzc2V0cy90d2l0dGVyLWljb24uc3ZnIjs=">
While the image holds its original name in the /dist/static/assets folder. How can I get the images working with the file loader?
When running an application that is built using webpack 2, sourcemaps are detected in chrome but original source is not loaded.
I'm using webpack beta21.
These files used to be detected automatically, ie when a breakpoint was put in the the output from webpack js file, the source view would jump to the original source input to webpack. But now I am stuck with this screen:
config:
var path = require("path");
var webpack = require("webpack");
var WebpackBuildNotifierPlugin = require('webpack-build-notifier');
const PATHS = {
app: path.join(__dirname, '../client'),
build: path.join(__dirname, '../public')
};
module.exports = {
entry: {
app: PATHS.app + '/app.js'
},
output: {
path: PATHS.build,
filename: '[name].js'
},
devtool: "source-map",
module: {
loaders: [
{
test: /\.js?$/,
loader: 'babel-loader',
include: [
path.resolve(__dirname, 'client'),
],
exclude: /node_modules/
},
{
test: /\.css/,
loader: "style!css"
}
]
},
resolve: {
// you can now require('file') instead of require('file.js')
extensions: ['', '.js', '.json']
} ,
plugins: [
new WebpackBuildNotifierPlugin()
]
};
Generated files with source maps won't automatically redirect to their original files, because there's potentially a 1-to-many relationship.
If you see the message Source Map Detected, the original file should already appear on the side file tree or the file explorer via Crl + P. If you don't know the original file name, you can open the source map file itself.
The source map path can be identified by a //# sourceMappingURL= comment or the X-SourceMap header:
Open up the source map via url and look for the sources property for the original file name:
The original file should be visible in the sources panel:
If you don't see the message Source Map Detected
You can manually add an external source map by right clicking and selecting Add Source Map:
Additional Resources
If that still doesn't work, you can try a Source Map Validator
For webpack specifically, you can configure the devtool property
If you're mapping to a workspace, that means you already have the source code. Including the source code in your source map is creating an unnecessary redundancy.
Use nosources-source-map instead.
The issue with external source maps was fixed in Chrome 52 but it looks like you've got your devtool set differently from mine, I use:
devtool: '#source-maps'
How are you building your source? If you're running with -d it will switch to inline source maps
I'm trying to debug an application written in Angular 2 build from webpack with VScode. I'm able to use the debugger for chrome extension in VSCode to attach my application. And it did hit the break point of the compiled js file. But it cannot find the sourcemap files.
It seems that webpack will have a webpack:// to host the files which the *.js file pointed to, like in the image:
And I can set the breakpoint inside the ts files inside webpack folder. However vscode is not able to find the ts files. So I change the configuration of webpack to
output: {
path:root('__build');
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
And then all files seemed to map to the absolute paths of the original ts files. And in chrome developer tool it looks like this:
But both chrome and vscode said the files inside this file:// is different from the original ts files. So I'm wondering whether there's a way that in webpack's configuration could make *.js file sourcemap to original ts files. And here's all my configurations:
typescript configuration:
{
"compilerOptions": {
"outDir": "dist",
"target": "ES5",
"module": "commonjs",
"sourceMap": true
}
}
webpack config:
{
entry: "./src/app/bootstrap",
output: {
path: root('__build__'),
filename: env({
'development': '[name].js',
'all': '[name].[hash].min.js'
}),
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
devtool:'source-map',
devServer: {
contentBase: "public/"
}
}
Another thing is that if in chrome developer tools, if I add the original files into the workspace and map the files from file:// to this folder, I can actually set breakpoints inside these files. So I'm wondering there's a way to map to local resources in vscode.
I changed this:
output: {
// ...snip...
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
to this:
output: {
// ...snip...
devtoolModuleFilenameTemplate: function(info){
return "file:///"+encodeURI(info.absoluteResourcePath);
}
},
and now it encodes the spaces properly, and the sourcemap file works as expected.
Thanks to Rob Lourens, this problem is caused by spaces and other special characters in the file path that may break sourcemaps.
I’m using https://github.com/jney/grunt-htmlcompressor to compress HTML files. But it’s requiring me to manually type-in all the HTML files which I want minified:
grunt.initConfig({
htmlcompressor: {
compile: {
files: {
'dest/index.html': 'src/index.html'
},
options: {
type: 'html',
preserveServerScript: true
}
}
}
});
Is there a way to specify that I want to minify all HTML files of the entire folder (and subfolders)?
Or, in case this html-compressor is limited, are you aware of a different npm package that does this HTML mification?
The glob pattern should be allowed for any grunt task by default. Then simply use dynamic files to build each one to your dest
Instead of:
files: {
'dest/index.html': 'src/index.html'
},
Go with:
files: [
{
expand: true, // Enable dynamic expansion.
cwd: 'src/', // Src matches are relative to this path.
src: ['**/*.html'], // Actual pattern(s) to match.
dest: 'dest/', // Destination path prefix.
},
],
As far as another plugin I would recommend grunts contrib version since it's more common and maintained by the grunt team.