Hey guys (using webpack 2.1.0-beta.22) so I have the following config in my webpack.base.js:
entry: {
client: "./client/index.js"
},
output: {
path: _.outputPath,
filename: '[name].js',
publicPath: '/themes/default/dist/'
},
module: {
loaders: [
{
test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
loader: 'file',
query: {
name: 'media/[name].[hash:8].[ext]'
}
}
]
}
And this in my webpack.dev.js:
const cssImagePath = path.resolve('../..');`
base.module.loaders.push(
{
test: /\.(s?)css$/,
loaders: [
'style-loader',
`css-loader?sourceMap&root=${cssImagePath}`,
'sass-loader?outputStyle=expanded&sourceMap&sourceMapContents'
]
}
)
Now I have this line in my scss file: background-image: url('/themes/default/client/images/snow-flake.png');
If I run webpack and use the inspector the path is being replaced to this: url(/themes/default/dist/media/snow-flake.0af467e3.png)
Which looks perfect problem is the file-loader is not creating / copying to that directory so themes/default/dist/media does not exist?
Anyone came across this?
Related
I have the below webpack.config. I'm trying to use relative url in my style.css to point to some svg files. The problem is the relative url is referencing a copy of the svg file which is just an export statement. Does anyone know why my webpack.config is creating these copied svg files? The files aren't working to show the image but the original svg does, so just trying to get webpack to stop creating the copied export file and just reference the actual svg. Thanks.
webpack.config.cs:
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { VueLoaderPlugin } = require("vue-loader");
const srcPath = path.resolve(__dirname, './src');
const stylePath = path.resolve(srcPath, './styles');
const bldPath = path.resolve('../SpeedRunApp/wwwroot/dist');
module.exports = {
devtool: 'source-map',
entry: {
master: path.resolve(srcPath, 'index.js'),
style: `${stylePath}/style.css`
},
mode: 'development',
watch: true,
module: {
rules: [
{
test: /\.scss$/,
use: [{ loader: 'style-loader' },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [ require('autoprefixer') ]
}
}
},
{ loader: 'sass-loader' }]
},
{
exclude: /(node_modules|bower_components)/,
include: srcPath,
test: /\.js$/,
use: [{ loader: 'babel-loader' }]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: './fonts/',
outputPath: './fonts/',
esModule: false
}
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './images/',
publicPath: './images/',
esModule: false
}
}
]
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
chunks: 'all',
name: 'vendor',
test: /[\\/]node_modules[\\/]/
}
}
},
},
output: {
filename: '[name].min.js',
chunkFilename: '[name].min.js',
globalObject: 'this',
path: `${bldPath}`,
publicPath: '/dist/'
},
plugins: [
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [`${bldPath}/**`],
dry: false,
verbose: true,
dangerouslyAllowCleanPatternsOutsideProject: true
}),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: '[name].min.css'
})
]
};
style.css:
.twitter-logo {
background: url(../fonts/Twitter_Logo_WhiteOnBlue.svg)
}
.twitch-logo {
background: url(../fonts/TwitchGlitchPurple.svg)
}
.youtube-logo {
background: url(../fonts/youtube_social_square_red.svg)
}
Weird copy files webpack is creating:
Content of copied files:
I bailed on using the css and just went with importing the svgs, changed code to this and works. I put my own non-fontawesome svgs in the "font" folder in the Node.js project (webpack project) and that is correctly copying them to the static font folder in the Web MCV project.
Index.js
import '#fortawesome/fontawesome-free/js/all.min.js'
import './fonts/TwitchGlitchPurple.svg';
import './fonts/Twitter_Logo_WhiteOnBlue.svg';
import './fonts/youtube_social_square_red.svg';
import './fonts/pie-chart.svg';
Node.js (webpack) project:
Successful copy to static folder in Web.MVC project:
Code using svg:
I have a backend project that I would like to bundle using Webpack v5.
I would like to split some of the files into their own bundles and have them imported into the main entry.
The main entry has a dependOn key that contains an array of filenames that will be used by the main entry.
This is the webpack.config.json:
module.exports = {
entry: {
app: {
import: './index.ts',
dependOn: 'routes'
},
routes: ['./routes.ts']
},
output: {
filename: '[name].js',
libraryTarget: 'commonjs2',
path: path.resolve(__dirname, 'build')
},
resolve: {
extensions: ['.ts', '.js']
},
target: 'node',
externals: [
nodeExternals()
],
mode: 'production',
optimization: {
minimize: false,
},
module: {
rules: [{ test: /\.tsx?$/, loader: 'ts-loader' }]
},
plugins: [
new ContextReplacementPlugin(/any-promise/)
]
};
After running the build two files are generated (app.js & routes.js) as expected. But when running the entry point with NodeJS I get the following error: webpack_require.C does not exist.
Going through the documentation I see that their example dependOn is based on packages and not indvidual application files.
Can you add applicaton files to dependOn? Does this have something to do with module resolution?
Let me assume you have imported the routes in your app, and you want to split routes into a separate bundle instead of being included in the bundled app.js.
Here's how you could make it with SplitChunksPlugin https://webpack.js.org/plugins/split-chunks-plugin.
module.exports = {
entry: {
app: "./index"
},
target: "node",
optimization: {
splitChunks: {
cacheGroups: {
routes: {
filename: "routes.js",
test: module => {
return module.resource && module.resource.includes("routes");
},
enforce: true,
chunks: "all"
}
}
}
}
};
Webpack will output two files, app.js and routes.js.
Can someone help me in figuring out what should be the webpack sdk config to build sdk for both web and browser?
My current config looks like this
const path = require('path');
let baseConfig = {
mode: 'production',
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'sdk/js-sdk.js',
libraryTarget: 'umd',
library: 'jsSdk',
globalObject: 'this'
},
resolve: {
extensions: [ ".ts", ".js"]
},
externals: {
"request-promise-native": "request-promise-native",
"request": "request"
},
module: {
rules: [
{ test: /\.ts$/, use: 'ts-loader' }
]
}
}
module.exports = baseConfig
Which I am building using following command
"pn-dev-build": "rm -rf dist && npm version patch && webpack --mode=development && npm publish --registry http://localhost:4873",
And then if I install it in my vue-nuxt project it gives following error
fs in ./node_modules/request/lib/har.js friendly-errors 09:06:34
net in ./node_modules/forever-agent/index.js, ./node_modules/tough-cookie/lib/cookie.js and 1 other
friendly-errors 09:06:34
tls in ./node_modules/forever-agent/index.js, ./node_modules/tunnel-agent/index.js
Can someone help me in solving the above error?
Multiple entry point approach is not the best idea here because you are bundling for two different targets(node and browser) with same config
Better would be to export a array with two configuration something like this ( and in this approch you can use multiple entry point to split your browser bundle and other stuff to make your website performant )
in webpack.config.js ( use this file as Webpack config )
const webpackBrowserConfig = require("./webpack.config.browser.js");
const webpackServerConfig = require("./webpack.config.server.js");
module.exports = [webpackServerConfig, webpackBrowserConfig];
in webpack.config.browser.js
module.exports = {
target: 'web',
mode: 'production',
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
// your browser related config
},
resolve: {
extensions: [ ".ts", ".js"]
},
externals: {
"request-promise-native": "request-promise-native",
"request": "request"
},
module: {
rules: [
{ test: /\.ts$/, use: 'ts-loader' }
]
}
}
and in webpack.config.server.js
module.exports = {
target: 'node',
mode: 'production',
entry: './src/serverIndex.ts',
output: {
path: path.resolve(__dirname, 'dist')
// your server related config
},
resolve: {
extensions: [ ".ts", ".js"]
},
externals: {
"request-promise-native": "request-promise-native",
"request": "request"
},
module: {
rules: [
{ test: /\.ts$/, use: 'ts-loader' }
]
}
}
you can also create this in same file and reduce some duplication ( whichever works for you ) I showed this approach with two different file for clarity
create a file as an entry point for the server, and another for the browser.
let baseConfig = {
mode: 'production',
entry: ['browser.ts','server.ts'],
...
}
browser.ts contains all browser-specific logic, and server.ts contains all server-specific logis.
I can't get webpack (3.10) file-loader paths to work how I need it.. Here is an extract of my webpack.config.js
// ...
const images = {
test: /\.(jpg|png|svg)$/,
use: {
loader: 'file-loader',
options: {
name: 'images/[path][name].[hash].[ext]',
},
},
}
//...
const config = {
entry: {
App: './public/assets/js/main.js',
},
output: {
path: path.resolve(__dirname, 'public', 'assets', 'dist'),
filename: 'main.js',
},
module: {
rules: [javascript, styles, images],
},
plugins: [new ExtractTextPlugin('main.css'), uglify],
}
//...
I want my images to be in /public/assets/dist/images/XXX.svg but they're beeing loaded into /public/assets/dist/images/public/assets/images/XXX.svg
I really don't get it... thank you for every help.
I've already commented. But every question should have an answer.
test: /\.(jpg|png|svg)$/,
use: 'file-loader?name=[name].[ext]&outputPath=./images/'
I am trying to get *.scss files to be supported in my webpack configuration but I keep getting the following error when I run the webpack build command:
ERROR in ./~/css-loader!./~/sass-loader!./app/styles.scss
Module build failed: TypeError: Cannot read property 'sections' of null
at new SourceMapConsumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/node_modules/source-map/lib/source-map/source-map-consumer.js:23:21)
at PreviousMap.consumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/previous-map.js:37:34)
at new Input (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/input.js:42:28)
at parse (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/parse.js:17:17)
at new LazyResult (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:54:47)
at Processor.process (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/processor.js:30:16)
at processCss (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/lib/processCss.js:168:24)
at Object.module.exports (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/lib/loader.js:21:15)
# ./app/styles.scss 4:14-117
I can't for the life of me figure out why. It's a very basic setup.
I have created a dropbox share with the bare minimum illustrating this:
https://www.dropbox.com/s/quobq29ngr38mhx/webpack.sass.test.zip?dl=0
Unzip this then run:
npm install
webpack
Here is my webpack.config.js file:
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'eval',
entry: [
'./app'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js',
publicPath: '/dist/'
},
plugins: [
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}]
}
}
And the index.js entry file:
require('./styles.scss');
alert('foo bar baz');
And the styles.scss file:
body {
background-color: #000;
}
It appears to follow the recommendations of the sass-loader documentation site, but I can't get it to run.
:(
Information about my environment:
node - 0.12.4
npm - 2.10.1
os - OS X Yosemite
I have managed to get another workaround working that doesn't involve editing the css-loader libraries within my npm_modules directory (as per the answer by #chriserik).
If you add '?sourceMap' to the sass loader the css loader seems to handle the output.
Here is my updated configuration:
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'eval',
entry: [
'./app'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js',
publicPath: '/dist/'
},
plugins: [
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css!sass?sourceMap'
}]
}
}
P.S. I even expanded this test to include a compass-mixins include, and this worked too.
After having the same issue, I found this: https://github.com/webpack/css-loader/issues/84
Apparently, the solution for now is to manually modify lines 17-19 of /node_modules/css-loader/lib/loader.js with
if(map && typeof map !== "string") {
map = JSON.stringify(map);
}
This fixed the problem for me.
The problem is solved by setting source-map option to true (as seen in other answers).
But in case you find messy passing options in the query string there is an alternative;
for configuring the sass loader you can create a sassLoader property in the webpack config object:
module.exports = {
devtool: 'eval',
entry: [
'./app'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js',
publicPath: '/dist/'
},
plugins: [
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css!sass'
// loader: ExtractPlugin.extract('style', 'css!sass'),
}]
},
sassLoader: {
sourceMap: true
},
}