Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack issue loading static files #147

Open
sebash1992 opened this issue Dec 30, 2017 · 1 comment
Open

Webpack issue loading static files #147

sebash1992 opened this issue Dec 30, 2017 · 1 comment

Comments

@sebash1992
Copy link

Hello i am new in webpack, i use a template for angular 2 and c# core that use webpack. But i am having an issue to set the background img. can anyone help me?

Webpack.config
`const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: /.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
{ test: /.html$/, use: 'html-loader?minimize=false' },
{ test: /.css$/, use: ['to-string-loader', 'css-loader'] },
{ test: /.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
{ test: /.svg(?v=\d+.\d+.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml' },
{ test: /.woff(?v=\d+.\d+.\d+)?$/, loader: "file-loader?mimetype=application/font-woff" },
{ test: /.woff2(?v=\d+.\d+.\d+)?$/, loader: "file-loader?mimetype=application/font-woff" },
{ test: /.ttf(?v=\d+.\d+.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream" },
{ test: /.eot(?v=\d+.\d+.\d+)?$/, loader: "file-loader" },
{ test: /.scss$/, exclude: /node_modules/, loaders: ['raw-loader', 'sass-loader'] },
]
},
plugins: [new CheckerPlugin()]
};

// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
    entry: { 'main-client': './ClientApp/boot-client.ts' },
    output: { path: path.join(__dirname, clientBundleOutputDir) },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        })
    ].concat(isDevBuild ? [
        // Plugins that apply in development builds only
        new webpack.SourceMapDevToolPlugin({
            filename: '[file].map', // Remove this line if you prefer inline source maps
            moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
        })
    ] : [
        // Plugins that apply in production builds only
        new webpack.optimize.UglifyJsPlugin()
    ])
});

// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
    resolve: { mainFields: ['main'] },
    entry: { 'main-server': './ClientApp/boot-server.ts' },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./ClientApp/dist/vendor-manifest.json'),
            sourceType: 'commonjs2',
            name: './vendor'
        })
    ],
    output: {
        libraryTarget: 'commonjs',
        path: path.join(__dirname, './ClientApp/dist')
    },
    target: 'node',
    devtool: 'inline-source-map'
});

return [clientBundleConfig, serverBundleConfig];

};
`

'scss'

body{ font-family: "Tw Cen MT", "Century Gothic", Arial; font-size: 15px; color:$secondary-text-color; background-image: url('../../content/logoWhite.png'); }

here is the image, and this is the error that i am having

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:52243/content/logoWhite.png
Thanks

@jedwards1211
Copy link
Owner

Not really sure, this is better as a stack overflow question... I'll close this, but anyway...I thought you have to use css-loader and style-loader together with sass-loader?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants