I have the following app structure:
/webapp
/lib
/assets
ic_add_black_24px.svg
ic_clear_black_24px.svg
..
..
Here is my webpack.config.js:
var path = require('path'),
webpack = require("webpack"),
libPath = path.join(__dirname, 'lib'),
wwwPath = path.join(__dirname, 'www'),
pkg = require(path.join(__dirname,'package.json')),
HtmlWebpackPlugin = require('html-webpack-plugin');
var config = {
entry: path.join(libPath, 'index.js'),
output: {
path: path.join(wwwPath),
filename: 'bundle-[hash:6].js'
},
module: {
loaders: [{
test: /\.html$/,
loader: 'file?name=templates/[name]-[hash:6].html'
}, {
test: /\.(png|jpg|svg)$/,
loader: 'file-loader?name=assets/[name].[ext]' // inline base64 URLs for <=10kb images, direct URLs for the rest
}, {
test: /\.css$/,
loader: "style!css"
}, {
test: /\.scss$/,
loader: "style!css!autoprefixer!sass"
}, {
test: /\.js$/,
exclude: /(node_modules)/,
loader: "ng-annotate?add=true!babel"
}, {
test: [/fontawesome-webfont\.svg/, /fontawesome-webfont\.eot/, /fontawesome-webfont\.ttf/, /fontawesome-webfont\.woff/, /fontawesome-webfont\.woff2/],
loader: 'file?name=fonts/[name].[ext]'
}]
},
plugins: [
// HtmlWebpackPlugin: Simplifies creation of HTML files to serve your webpack bundles : https://www.npmjs.com/package/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
pkg: pkg,
template: path.join(libPath, 'index.html')
}),
// OccurenceOrderPlugin: Assign the module and chunk ids by occurrence count. : https://webpack.github.io/docs/list-of-plugins.html#occurenceorderplugin
new webpack.optimize.OccurenceOrderPlugin(),
// Deduplication: find duplicate dependencies & prevents duplicate inclusion : https://github.com/webpack/docs/wiki/optimization#deduplication
new webpack.optimize.DedupePlugin()
]
};
module.exports = config;
Here is how I am using the svg asset in one of my html file:
<md-card-header>
<span flex></span>
<md-button class="md-icon-button" aria-label="remove condition" style="background-color: #DCD8D8" ng-click="event.removeCondition(condition)">
<md-icon md-svg-src="/lib/assets/ic_clear_black_24px.svg"></md-icon>
</md-button>
</md-card-header>
When I do rm -rf www/* && webpack -p, it creates the bundle successfully, but without any assets loaded.. I have tried to use svg-loader, url-loader, file, but none of them works.. What am I doing wrong here?
In case it helps anyone, I ended up using CopyWebpackPlugin to load the assets manually to my required location. This is what my webpack.config looks like now:
var path = require('path'),
webpack = require("webpack"),
libPath = path.join(__dirname, 'lib'),
wwwPath = path.join(__dirname, 'www'),
pkg = require(path.join(__dirname,'package.json')),
CopyWebpackPlugin = require('copy-webpack-plugin'),
HtmlWebpackPlugin = require('html-webpack-plugin');
var config = {
entry: path.join(libPath, 'index.js'),
output: {
path: path.join(wwwPath),
filename: 'bundle-[hash:6].js'
},
module: {
loaders: [{
test: /\.html$/,
loader: 'file?name=templates/[name]-[hash:6].html'
}, {
test: /\.(png|jpg|svg)$/,
loader: 'svg-url-loader?name=assets/[name].[ext]' // inline base64 URLs for <=10kb images, direct URLs for the rest
}, {
test: /\.css$/,
loader: "style!css"
}, {
test: /\.scss$/,
loader: "style!css!autoprefixer!sass"
}, {
test: /\.js$/,
exclude: /(node_modules)/,
loader: "ng-annotate?add=true!babel"
}, {
test: [/fontawesome-webfont\.svg/, /fontawesome-webfont\.eot/, /fontawesome-webfont\.ttf/, /fontawesome-webfont\.woff/, /fontawesome-webfont\.woff2/],
loader: 'file?name=fonts/[name].[ext]'
}]
},
plugins: [
new CopyWebpackPlugin([{
from: 'lib/assets',
to: wwwPath + '/lib/assets'
}]),
// HtmlWebpackPlugin: Simplifies creation of HTML files to serve your webpack bundles : https://www.npmjs.com/package/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
pkg: pkg,
template: path.join(libPath, 'index.html')
}),
// OccurenceOrderPlugin: Assign the module and chunk ids by occurrence count. : https://webpack.github.io/docs/list-of-plugins.html#occurenceorderplugin
new webpack.optimize.OccurenceOrderPlugin(),
// Deduplication: find duplicate dependencies & prevents duplicate inclusion : https://github.com/webpack/docs/wiki/optimization#deduplication
new webpack.optimize.DedupePlugin()
]
};
module.exports = config;
Related
Hey I have this project which has this structure:
bundler -> webpack.common.js
src -> main.js, index.html, styles.css
package.json
node_modules... the rest doesnt matter really
It is set up like when I do: npm run dev webpack creates a live server using my current main.js for my index.html
The webpack.common.js looks like this:
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "../src/current_script.js"),
output: {
hashFunction: "xxhash64",
filename: "bundle.[contenthash].js",
path: path.resolve(__dirname, "../dist"),
},
devtool: "source-map",
plugins: [
new CopyWebpackPlugin({
patterns: [{ from: path.resolve(__dirname, "../static") }],
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "../src/index.html"),
minify: true,
}),
new MiniCSSExtractPlugin(),
],
module: {
rules: [
// HTML
{
test: /\.(html)$/,
use: ["html-loader"],
},
// JS
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
// CSS
{
test: /\.css$/,
use: [MiniCSSExtractPlugin.loader, "css-loader"],
},
// Images
{
test: /\.(jpg|png|gif|svg)$/,
type: "asset/resource",
generator: {
filename: "assets/images/[hash][ext]",
},
},
// Fonts
{
test: /\.(ttf|eot|woff|woff2)$/,
type: "asset/resource",
generator: {
filename: "assets/fonts/[hash][ext]",
},
},
],
},
};
```
Now my question is how can I define multiple entries under certain URLs.
So for example now under localhost/ it will redirect me to index.html using my main.js
Is there a way of having localhost/2 use my index.html with another js file like main2.js
I'm new in Webpack (before I used Gulp) and now I want to move the existing application from Gulp to Webpack.
But I'm getting issues like Module not found: Error: Can't resolve '/src/app/index.js' in '/var/www/project' or Module not found: Error: Can't resolve '/src/styles/main.scss' in '/var/www/project' and same for every file i'm using on my enty chain.
Here is my file structures:
package.json
.env
.env.example
webpack.conf.js
src/
app/
index.js
other js/vue related files
styles/
main.scss and all related styles
public/
index.html
favicon.ico
images/
all images
and here is mine webpack.conf.js:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const Dotenv = require('dotenv-webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const ENV = process.env.APP_ENV;
const isDev = ENV === 'dev'
const isProd = ENV === 'prod';
function setDevTool() {
if (isDev) {
return 'inline-source-map';
} else if (isProd) {
return 'source-map';
} else {
return 'eval-source-map';
}
}
const config = {
entry: {
'bundle.min.css': [
path.resolve(__dirname, '/src/styles/main.scss'),
],
'bundle.js': [
path.resolve(__dirname, '/src/app/index.js')
]
},
output: {
filename: '[name]',
path: path.resolve(__dirname, 'dist'),
},
devtool: setDevTool(),
module: {
rules: [
// fonts loader
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
},
// babel loader
{
test: /\.js$/,
use: 'babel-loader',
exclude: [
/node_modules/
]
},
// raw html loader
{
test: /\.html/,
loader: 'raw-loader'
},
// css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
// sass loader
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['style-loader', 'css-loader', 'sass-loader']
})
},
// vue loader
{
test: /\.vue$/,
loader: 'vue-loader'
},
// image url inliner
{
test: /\.(jpe?g|png|gif)$/,
loader: 'url-loader',
options: {
limit: 50 * 1024
}
},
// svg url inliner
{
test: /\.svg$/,
loader: 'svg-url-loader',
options: {
limit: 50 * 1024,
noquotes: true,
}
},
// image loader
{
test: /\.(jpg|png|gif|svg)$/,
loader: 'image-webpack-loader',
enforce: 'pre'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/src/public/index.html",
inject: 'body'
}),
new Dotenv({safe: true}),
new ExtractTextPlugin("bundle.min.css"),
new VueLoaderPlugin()
],
devServer: {
contentBase: './src',
port: 7700,
}
}
if (isProd) {
config.plugins.push(
new UglifyJSPlugin(),
new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}])
);
};
module.exports = config;
I do not understand why it can't find those files if for examlpe '/var/www/project//src/styles/main.scss' it mention in error is correct path?
Try to remove the initial slashes from path.resolve(). For example:
path.resolve(__dirname, '/src/styles/main.scss')
should be:
path.resolve(__dirname, 'src/styles/main.scss')
In my React app I'm using Webpack. Here is my webpack.config:
"use strict";
var path = require("path");
var WebpackNotifierPlugin = require("webpack-notifier");
var BrowserSyncPlugin = require("browser-sync-webpack-plugin");
module.exports = {
entry: "./Scripts/reactApp/index.jsx",
output: {
path: path.resolve(__dirname, "./Scripts/reactApp/build"),
filename: "react_bundle.js"
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: [/node_modules/, path.resolve(__dirname, "./Scripts/reactApp/translations/he.translations.json")],
use: {
loader: "babel-loader"
}
},
{
test: /\.js$/,
exclude: [/node_modules/, path.resolve(__dirname, "./Scripts/reactApp/translations/he.translations.json")],
use: {
loader: "babel-loader"
}
}
]
},
devtool: "inline-source-map",
plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()]
};
I'm trying to exclude from bundle he.translations.json
But webpack included it whatever.
Can you explain me what I do wrong?
Sorry in advance, I'm new in webpack.
You can just do (from webpack docs)
...
exclude: [/node_modules/, path.resolve(__dirname, 'Scripts/reactApp/translations/he.translations.json')],
...
There's no dot in the path and, of course, assuming you have the wepback config file in the proper place.
I am trying to build my project using webpack and thus far I am loving it. However, now that I am trying to include font-awesome, it is annoying me quite a bit.
I have installed font-awesome through npm, and I have imported it into my project using import 'font-awesome/css/font-awesome.css'. Webpack then tries to include that file, but fails to find the appropriate loader for the font files. Here is my webpack.config.js:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractScss = new ExtractTextPlugin('bundle.css');
module.exports = {
entry: './app/app.tsx',
output: {
path: 'dist',
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.ts', '.js', '.tsx']
},
devtool: 'source-map',
module: {
loaders: [
{
test: /\.ts(x?)$/,
loader: 'babel?presets[]=es2015!ts'
},
{
test: /\.scss$/,
loader: extractScss.extract(['css', 'sass'])
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url?limit=10000&minetype=application/font-woff'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.ejs',
inject: false,
appMountId: 'root'
}),
new ExtractTextPlugin('bundle.css')
]
};
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']