We are trying to migrate from grunt to webpack.
In our project, we use a JS file called boiler to define the frequently accessed core classes.
__boiler__.js
define(function (require) {
return {
Helpers: require('helpers/_helpers_'),
Enums: require('enums/_enums_'),
Context: require('context'),
...
};
});
And Web Pack Config
webpack.config.js
const path = require('path');
module.exports = {
resolve: {
extensions: ['.js', '.scss'],
alias: {
app: path.resolve(__dirname, './dev_files/app'),
Boiler: path.resolve(__dirname, './dev_files/app/core/_boiler_')
}
},
entry: './dev_files/main.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.(html)$/,
use: {
loader: 'html-loader'
}
},
{
test: /\.js$/,
use: ['babel-loader']
}
]
}
};
Then when I tried to do webpack build, it gave me some errors like:
ERROR in ./dev_files/app/core/_boiler_.js
Module not found: Error: Can't resolve 'context' in 'C:\Myproject\dev_files\app\core'
resolve 'context' in 'C:\Myproject\dev_files\app\core'
Parsed request is a module
using description file: C:\Myproject\package.json (relative path: ./dev_files/app/core)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
....
I'm a noob when in JavaScript and WebPack in general. Could someone give me an idea what am I doing wrong here? Thanks.
I assume you are using require for your module loading.
try to export your definition so that it can be found/included by webpack
module.export = (function (require) {
return {
Helpers: require('helpers/_helpers_'),
Enums: require('enums/_enums_'),
Context: require('context'),
// ...
};
});
This is a branch off of my previous question and applied suggestions. But I am still having major issues.
I now have my babel transpiler, along with a .babelrc file in place. My import code to import my module looks like this:
var init = require('./app/js/modules/toc');
init();
However I'm getting this:
ERROR in ./app/js/script.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./app/js/modules/toc in /projects/project-root/app/js
# ./app/js/script.js 1:11-42
Webpack config:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./app/js/script.js",
module: {
rules: [{
test: /\.js$/,
use: 'babel-loader'
}]
},
output: {
path: __dirname + "public/javascripts",
filename: "scripts.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
.babelrc
{
"presets": ["es2015"]
}
Gulptask
//scripts task, also "Uglifies" JS
gulp.task('scripts', function() {
gulp.src('app/js/script.js')
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest('public/javascripts'))
.pipe(livereload());
});
I'm totally lost...what am I doing wrong?
For my import code I also tried:
import {toc} from './modules/toc'
toc();
UPDATE: As recommended I needed to add resolve to my config. It looks like this now:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./app/js/script.js",
resolve: {
extensions: ['.js']
},
module: {
rules: [{
test: /\.js$/,
use: 'babel-loader'
}]
},
output: {
path: __dirname + "public/javascripts",
filename: "scripts.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
Sadly I still get:
ERROR in Entry module not found: Error: Cannot resolve 'file' or
'directory' ./app/js/script.js in /projects/project-root
Does my file structure need to change?
Whenever you import/require a module without specifying a file extension, you need to tell webpack how to resolve it. This is done by the resolve section inside the webpack config.
resolve: {
extensions: ['.js'] // add your other extensions here
}
As a rule of thumb: whenever webpack complains about not resolving a module, the answer probably lies in the resolve config.
Let me know about any further questions and if this works.
EDIT
resolve directly to the root level of your config:
// webpack.config.js
module.export = {
entry: '...',
// ...
resolve: {
extensions: ['.js']
}
// ...
};
You are specifying an entry point in your webpack config AND in gulp. Remove the entry property in your webpack config.
If you specify it twice, the gulp config will tell webpack to get the file in ./app/js/script.jsand then webpack in ./app/js/script.js which will result in a path like ./app/js/app/js/script.js.
Keep us posted if you fixed it. =)
Given that your script is located at ./app/js/script.js and the requested module is there ./app/js/modules/toc, you would need to call it relatively to your script => ./modules/toc should work.
This is because both your script and module are located in the jsfolder.
I have a webpack 2 configuration as follows:
module.exports = {
context: __dirname,
entry: [
"./app.ts",
"./tab.ts",
"./client/clientService.ts",
"./client/clientSearchComponent.ts",
"./infrastructure/messageComponent.ts",
"./infrastructure/typeaheadComponent.ts",
"./url.ts"],
output: {
filename: "./wwwroot/js/admin/admin.js"
},
devtool: "source-map",
module: {
rules: [
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
This is imported into a gulp task as follows...
gulp.task("admin:js",
function (done) {
var configuration = require(path.join(__dirname, config.js, "admin/webpack.config.js").toString());
webpack(configuration).run(reportWebpackResults(done));
});
I am finding that I have to specify each component in entry[...].
How do I specify globs, they don't seem to work out of the box.
entry: [
"./client/**/*.ts", // module not found...
You can use a glob library like globule. globule.find returns an array of the files. So you can use it as the entry:
entry: globule.find("./client/**/*.ts")
If you want to include other entry points as well you can combine them by spreading the returned array:
entry: [
'./other/entry.js'
...globule.find("./client/**/*.ts")
]
Or use any other way of combining the arrays (e.g. Array.prototype.concat).
Alternatively you can use a single entry that imports everything you need with the help of require.context as shown in the question webpack require every file in directory.
const req = require.context('./client/', true, /\.ts$/);
req.keys().forEach(req);
I'm a webpack rookie who wants to learn all about it.
I came across a conflict when running my webpack telling me:
ERROR in chunk html [entry] app.js Conflict: Multiple assets emit to
the same filename app.js
What should I do to avoid the conflict?
This is my webpack.config.js:
module.exports = {
context: __dirname + "/app",
entry: {
'javascript': "./js/app.js",
'html': "./index.html",
},
output: {
path: __dirname + "/dist",
filename: "app.js",
},
resolve: {
extensions: ['.js', '.jsx', '.json']
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ["babel-loader"]
},
{
test: /\.html$/,
loader: "file-loader?name=[name].[ext]",
}
]
}
};
i'm not quite familiar with your approach so I'll show you a common way to help you out.
First of all, on your output, you are specifying the filename to app.js which makes sense for me that the output will still be app.js. If you want to make it dynamic, then just use "filename": "[name].js".
The [name] part will make the filename dynamic for you. That's the purpose of your entry as an object. Each key will be used as a name in replacement of the [name].js.
And second, you can use the html-webpack-plugin. You don't need to include it as a test.
I had the same problem, I found it was setting a static output file name that was causing my problem, in the output object try the following object.
output:{
filename: '[name].js',
path: __dirname + '/build',
chunkFilename: '[id].[chunkhash].js'
},
This makes it so that the filenames are different and it doesn't clash.
EDIT:
One thing i've recently found is that you should use a hash instead of chunkhash if using HMR reloading. I haven't dug into the root of the problem but I just know that using chunkhash was breaking my webpack config
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash:8].js',
sourceMapFilename: '[name].[hash:8].map',
chunkFilename: '[id].[hash:8].js'
};
Should work fine with HMR then :)
EDIT July 2018:
A little more information on this.
Hash
This is a hash generated every time that webpack compiles, in dev mode this is good for cache busting during development but shouldn't be used for long term caching of your files. This will overwrite the Hash on every build of your project.
Chunkhash
If you use this in conjunction with a runtime chunk then you can use it for long term caching, the runtime chunk will see what's changed in your source code and update the corresponding chunks hash's. It won't update others allowing for your files to be cached.
I had exactly the same problem. The problem seems to occur with the file-loader. The error went away when I removed the html test and included html-webpack-plugin instead to generate an index.html file. This is my webpack.config.js file:
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
})
module.exports = {
entry: {
javascript: './app/index.js',
},
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: [
path.resolve(__dirname, '/node_modules/')
],
loader: 'babel-loader'
},
]
},
resolve: {
extensions: ['.js', '.jsx', '.json']
},
plugins: [HTMLWebpackPluginConfig]
}
The html-webpack-plugin generates an index.html file and automatically injects the bundled js file into it.
I had the same issue after upgrading to Webpack 5. My problem was caused by the copy-webpack-plugin.
Below is the original pattern ignoring a specified file, it works with Webpack 4, but throws an error with Webpack 5.
ERROR in Conflict: Multiple assets emit different content to the same
filename default.hbs
plugins: [
new CopyPlugin({
patterns: [
{
from: "./src/academy/templates",
globOptions: {
ignore: ["default.hbs"]
}
},
]
}),
],
To fix the error:
plugins: [
new CopyPlugin({
patterns: [
{
from: "./src/academy/templates",
globOptions: {
ignore: ["**/default.hbs"]
}
},
]
}),
],
By not ignoring the specified file, the default.hbs (a.k.a index.html) was copied twice into the build (a.k.a /disk) directory effectively resulting in Webpack trying to insert multiple assets into the "same" (duplicated) filename.
I had the same problem, and I found these in the documents.
If your configuration creates more than a single “chunk” (as with multiple entry points or when using plugins like CommonsChunkPlugin), you should use substitutions to ensure that each file has a unique name.
[name] is replaced by the name of the chunk.
[hash] is replaced by the hash of the compilation.
[chunkhash] is replaced by the hash of the chunk.
output: {
path:__dirname+'/dist/js',
//replace filename:'app.js'
filename:'[name].js'
}
In my case the source map plugin was conflicting with the extract mini plugin.
Could not find a solution to this anywhere. source maps for css and javascript were writing to the same file. Here is how I finally solved it in my project:
new webpack.SourceMapDevToolPlugin({
filename: '[name].[ext].map'
}),
I encountered this error in my local dev environment. For me, the solution to this error was to force the files to rebuild. To do this, I made a minor change to one of my CSS files.
I reloaded my browser and the error went away.
If you getting same kind error in Angular
Solution : delete cache folder inside .angular folder and
start portal again ng serve
I had the same problem after updating all the dependencies to latest (e.g. webpack 4 -> 5) for a Chrome extension I made about 2 years ago, and managed to solve it.
There were two files in the complaint (popup.html and options.html). Here is my original webpack.config.js file:
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
target: 'web',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
entry: {
popup: './src/scripts/popup.tsx',
options: './src/scripts/options.tsx',
},
context: path.join(__dirname),
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js', '.json', '.css'],
},
plugins: [
new CleanWebpackPlugin(),
new CopyPlugin([
{ from: 'src/popup.html', to: 'popup.html' },
{ from: 'src/options.html', to: 'options.html' },
{ from: 'src/manifest.json', to: 'manifest.json' },
{ from: 'src/icons', to: 'icons' },
]),
new HtmlWebpackPlugin({
template: path.join("src", "popup.html"),
filename: "popup.html",
chunks: ["popup"]
}),
new HtmlWebpackPlugin({
template: path.join("src", "options.html"),
filename: "options.html",
chunks: ["options"]
}),
]
};
I solved it by removing:
{ from: 'src/popup.html', to: 'popup.html' },
{ from: 'src/options.html', to: 'options.html' },
under new CopyPlugin... part.
So seems like right now there is no need to explicitly copy popup.html and options.html to output folder when HtmlWebpackPlugin is already emitting them.
Similar solution to the above with file-loader, however, I think this solution is the more elegant. Before, I was only specifying the [name], adding the [path][name] resolved my conflict as below:
module: {
rules: [
{
test: /\.(mp4|m4s)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
},
],
I changed index.html file from /public directory to /src to fix this issue. (Webpack 5.1.3)
The same error in a Vue.js project when doing e2e with Karma. The page was served using a static template index.html with /dist/build.js. And got this error running Karma.
The command to issue Karma using package.json was:
"test": "cross-env BABEL_ENV=test CHROME_BIN=$(which chromium-browser) karma start --single-run"
The output configuration in webpack.config.js was:
module.exports = {
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
...
}
My solution: inspired by the Evan Burbidge's answer I appended the following at the end of webpack.config.js:
if (process.env.BABEL_ENV === 'test') {
module.exports.output.filename = '[name].[hash:8].js'
}
And then it eventually worked for both page serving and e2e.
I had a similar problem while upgrading webpack 3 to webpack 4. After upgrading the modules I came across this error.
WARNING in Conflict: Multiple assets emit different content to the same filename alert-icon.svg
WARNING in Conflict: Multiple assets emit different content to the same filename comment.svg
The problem was caused by fileloader for svg. Solved the error by adding a hash name: '[name].[hash:8].[ext]' making it unique every time webpack compiles.
Provinding the code below:
module: {
rules: [
{
test: /\.svg$/,
loader: 'file-loader',
query: {
name: '[name].[hash:8].[ext]'
}
]
}
webpack 5 solution
Add chunkFilename and assetModuleFilename in output as showed below.
output: {
path: path.join(__dirname, "/build/"),
filename: "js/[name].[contenthash].js",
chunkFilename: 'chunks/[name].[chunkhash].js',
assetModuleFilename: 'media/[name][hash][ext][query]'
},
Im trying to integrate PhotoSwipe into my current Project
this is the webpack.config.js
module.exports =
{
entry: './input.js',
output:
{
path: 'js/',
filename: 'output.js'
},
resolve:
{
alias:
{
'photoswipe_js': './node_modules/photoswipe/dist/photoswipe.js',
'photoswipe_ui_default': './node_modules/photoswipe/dist/photoswipe-ui-default.js'
}
},
watch: true
};
this is my main file
require(['photoswipe_js', 'photoswipe_ui_default'], function( PhotoSwipe, PhotoSwipeUI_Default )
{
console.log(PhotoSwipe);
console.log(PhotoSwipeUI_Default);
});
for some reason its trying to find the compiled file from the project root
like
'/1.output.js'
I need it to try to fetch the output file from
'/bundles/mybundle/js/1.output.js'
instead, how can I do that?
Add publicPath to your output object :
module.exports =
{
...
output:
{
path: 'js/',
filename: 'output.js',
publicPath: '/bundles/mybundle/js/'
},
...
};