For questions please post on Stack Overflow and use the 'webpack' tag (http://stackoverflow.com/tags/webpack).
dependabot-preview[bot] on npm_and_yarn
dependabot-preview[bot] on npm_and_yarn
chore(deps-dev): bump eslint-pl… (compare)
dependabot-preview[bot] on npm_and_yarn
chore(deps): bump acorn from 8.… (compare)
coffee-script
, this module is deprecated and points to coffeescript
(no hyphen)
module.exports = [{
mode: 'production',
module: {
rules: [{
test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/i,
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
}],
},
}
ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/me/company/assets'
error Command failed with exit code 2.
const buildConfigs = [{
mode: 'development',
plugins: [
new CopyPlugin([{
from: path.join(__dirname, './src/images/'),
to: path.join(__dirname, './dist/images/'),
}]),
],
}
Hi guys, I'm new to webpack, and I'm developing an npm chat package. I can't figure out the correct to make an external dependency. I tried the following for the styled-components
package.
externals: {
"styled-components": {
commonjs: "styled-components",
commonjs2: "styled-components"
}
}
However, when I try importing the package to my main react app. styled-components
is not found in my package build file. I made sure styled-components
is installed on my main react app
--debug
and --display-error-details
; https://webpack.js.org/api/cli/#debug-options
Hi guys,
Presently I am writing an es6 module which I am planning to bundle with webpack. The codebase which I am working on has a large frontend es5 codebase which is bundled outside webpack. I need to be able to use the es6 modules bundled by webpack in the existing es5 codebase.
Is there a way to export modules from webpack bundles to the global namespace?
I know we can use output.library: 'MyModule' for this, but if I have 3 modules A, B and C then using MyModule.A, MyModule.B,... seems a bit clunky.
I would like to send build progress to browser (through webpack-dev-middleware to eventSource) but I don't know how
compiler.apply(new webpack.ProgressPlugin(function(percentage, msg) {
}));
const devMiddleware = require('webpack-dev-middleware')(compiler, {
logLevel: 'silent',
publicPath: '/somePath/'
})
in the browser
const sse = new EventSource('/somePath/') // not sure what I should put here
sse.addEventListener('message', event => onSseMessage(event))
hello,
I am trying to load the fonts through vue.config.js. However I am not getting it.
scss
@include font-face(Lato, '/fonts/lato/latoThin', 100, normal, eot woff2 woff svg ttf);
vue.config.js
....
rules: [{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: 'lato/[name].[ext]',
outputPath: 'fonts/'
}
}]
},
if I remove the first slash from the source path, fonts/lato/latoThin
it loads the fonts, but in compile this error appears
* ./fonts/lato/latoThin.eot? in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./node_module
s/resolve-url-loader!./src/styles/global.scss
and put the bar back in the font path and it works - /fonts/lato/latoThin
Any solution?
ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/rchristian/Company/assets'
resolve './src' in '/Users/rchristian/Company/assets'
using description file: /Users/rchristian/Company/assets/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/rchristian/Company/assets/package.json (relative path: ./src)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src is not a file
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src.wasm doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src.json doesn't exist
as directory
existing directory
using path: /Users/rchristian/Company/assets/src/index
using description file: /Users/rchristian/Company/assets/package.json (relative path: ./src/index)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src/index doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src/index.wasm doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src/index.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src/index.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/rchristian/Company/assets/src/index.json doesn't exist
{
mode: 'production',
module: {
rules: [{
test: /\.s[ac]ss$/i,
use: ['sass-loader'],
}],
},
}
{
mode: 'production',
entry: [
path.join(__dirname, './src/stylesheets/postcss.scss'),
path.join(__dirname, './src/stylesheets/google_fonts.scss'),
],
output: {
path: path.join(__dirname, './dist/stylesheets'),
publicPath: './dist/stylesheets',
},
plugins: [
new CopyPlugin([{
from: 'src/images/',
to: path.join(__dirname, './dist/images/'),
}, {
from: 'src/fonts/',
to: path.join(__dirname, './dist/fonts/'),
}]),
],
module: {
rules: [{
test: /\.s[ac]ss$/i,
use: [
'css-loader',
'sass-loader',
],
}],
},
}
dist/stylesheets/main.js
-> contents look like minified CSS
filename: 'styles.css',
, the file is suddenly readable (indented correctly), and I can see webpack bundler code, plus stuff.../***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(0)(false);
// Module
exports.push([module.i, "/*!\n * Font Awesome 4.4.0 by @davegandy ...
Hello!
I'm exploring source codes of webpack and mini-css-extract-plugin
and I have a question: why two different structures Dependency
and Module
were introduced? Why Module
structure is not enough? If I'm not mistaken Dependency
has only information about what should be built and Module
has all algorithms about building, caching and so on. Am I correct? In this case in mini-css-extract-plugin
CssDependency
looks a bit strange, because it does all receives prepared contents from loader and CssModule
only exposes prebuilt sources.