I've the following webpack 4 configuration for production:
entry: {
app: './src/js/app',
'font-awesome': './src/js/plugins/font-awesome',
'../install/install': './src/js/installation/index',
},
output: {
path: path.join(__dirname, './production/public'),
filename: 'js/[name].[chunkhash].js'
},
I want to exclude install from the output hashing process, but i can't find a way. Is it possible ?
Thanks.
I found a way. It looks like output.filename can be a function. I solded with the following code:
output: {
path: path.join(__dirname, './production/public'),
filename: function(data) {
return data.chunk.name === '../install/install' ? 'js/[name].js' : 'js/[name].[chunkhash].js';
},
chunkFilename: 'js/[name].[chunkhash].js'
},
Related
When building with webpack 5, I get the error:
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
BREAKING CHANGE since webpack 5: The devtool option is more strict.
Please strictly follow the order of the keywords in the pattern.
In my webpack.config.js however, I have the setting:
devtool: 'eval-cheap-source-map',
Ive also tried eval as value which also does not work, although this website (https://webpack.js.org/configuration/devtool/) seems to indicate that it should.
I do not understand, what is going wrong here?
edit:
my webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
plugins: [
new HtmlWebpackPlugin({
title: 'MyApp',
}),
],
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'var',
library: 'MyApp'
},
resolve:{
alias:{
EVENTS: path.resolve(__dirname, "src/events"),
MODELS: path.resolve(__dirname, "src/models"),
GUI: path.resolve(__dirname, "src/gui"),
HELPER: path.resolve(__dirname, "src/helper")
}
},
devtool: 'eval-cheap-source-map',
devServer: {
watchContentBase: true,
contentBase: path.resolve(__dirname, 'dist'),
port: 9000
},
module: {
rules: [
{
test:/\.css$/,
use:['style-loader', 'css-loader']
}
]
},
}
my buildscript is webpack src/app.js -d --watch
Remove the -d parameter from your build script. -d stands for devtool, but it is not followed by a parameter value in your command.
I have a Node Js server that I bundled with webpack with the following config:
module.exports = {
entry: './build/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
devtoolModuleFilenameTemplate: '../[resource-path]',
},
target: 'node',
node: {
__dirname: true,
},
externals: {
kcors: 'kcors',
'koa-bodyparser': 'koa-bodyparser'
},
module: {
rules: [
{
test: /\.js$/,
use: ["source-map-loader"],
enforce: "pre"
},
],
},
resolve: {
extensions: ['.js'],
},
// plugins: [
// new webpack.DefinePlugin({
// "process.env": JSON.stringify(dotenv.parsed)
// }),
// ],
devtool: 'eval-source-map'
};
This created a single file main.js inside dist
Everything looks good so far. I manually tested the server and it works.
Now, before I used webpack, I have a set of unit tests that I named with the .spec.js suffix inside my entry folder (the build/ folder) and each .js file has each own .spec file sibling located in the same directory of the .js.
To run theses unit test, I used mocha with the command: mocha build/**/*.spec.js --recursive --timeout 20000
Since I am new to webpack and the concept of bundling, how do I run the same tests from the main.js file ? I want to make sure that all tests are still passing in the bundled file
use
npm install mocha mocha-loader
config your webpack.config.js file like:
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js',
},
module: {
rules: [
{
test: /test\.js$/,
use: 'mocha-loader',
exclude: /node_modules/,
},
],
},
};
then, call your test file from your main file like:
(into app.js)
import test from 'allMyTests';
I currently have webpack setup to compile using babel-loadera single entry point into a single output bundle. Something like
entry.js
import { A } from "a.js"
import { B } from "b.js"
...
if (TEST) {
console.log("this is a test");
}
webpack.config.js
module.exports = {
entry: {
entry: "entry.js"
},
output: {
filename: "[name].bundle.js",
path: __dirname + "/output"
},
module: {
rules: [
{
test: /\.js$/
use: {
loader: "babel-loader"
}
}]
},
plugins: [
new webpack.DefinePlugin({
TEST: JSON.stringify(true)
})
]
}
currently this all works fine. What I want though is the ability to create two versions of the entry.bundle.js. Effectively a version where TEST is true and a version where it is false: entry.bundle.js and entry.test.bundle.js
What do i need to change to achieve that? Ideally I would prefer not to have to have multiple webpack config files
If you have the boolean in this file, why not just if/else the file name and pass that same boolean down to the plugin?
let TEST = true; // assume this is passed in somehow, perhaps via cli arguments
module.exports = {
entry: {
entry: 'entry.js'
},
output: {
filename: TEST ? '[name].test.bundle.js' : '[name].bundle.js'
path: __dirname + '/output'
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader'
}
}]
},
plugins: [
new webpack.DefinePlugin({
TEST: JSON.stringify(TEST) // variable, will be consistent with filename
})
]
}
I do understand what you wish to do, but I am unaware of a slicker way to do this through any webpack specific techniques.
I'm using webpack-stream to integrate webpack into a gulp task, as below:
var gulp = require("gulp");
// var webpack = require('gulp-webpack');
var webpack = require('webpack-stream');
gulp.task("min:webpack",
function () {
return gulp.src('./App/App.js')
.pipe(webpack({
// watch: true,
module: {
entry: './App/App.js',
output: {
filename: 'App.bundle.js'
},
devtool: 'source-map'
}
}))
.pipe(gulp.dest('./App'));
});
Everything seems to be working as expected, except that the output file is always something like 6f7af85206d7f2f6536d.js instead of the expected App.bundle.js. In other similar questions (e.g., How to use gulp webpack-stream to generate a proper named file?), I've read that it was fixed effectively by specifying output: { filename: 'something'} in the configuration, but you can see that I'm doing that.
Any suggestions? Anything I'm overlooking?
OK, dumb mistake on my part. I had the configuration specified incorrectly. This config works as expected:
gulp.task("min:webpack",
function () {
return gulp.src('./App/App.js')
.pipe(webpack({
// watch: true,
entry: './App/App.js',
output: {
filename: 'App.bundle.js'
},
devtool: 'source-map'
}))
.pipe(gulp.dest('./App'));
});
Have a follow situation:
gulp.task('webpack', function(cb) {
gulp.src('webpack-init.js')
.pipe(webpack({
output: {
filename: 'bundle.js',
},
}))
.pipe(gulp.dest('./client/js'));
cb();
});
All ok, but i want to minify output file.
If i use gulp-uglify directly -
.pipe(webpack(...))
.pipe(uglify().on('error', gutil.log))
.pipe(gulp.dest('./client/js'));
have an error: "Unexpected token: punc ())]" and others of that ilk.
I found a solution. We can use normal version of webpack (not just gulp-webpack) to provide plugin include capability:
var gulpWebpack = require('gulp-webpack'),
webpack = require('webpack');
gulp.task('webpack', function() {
gulp.src('webpack-init.js')
.pipe(gulpWebpack({
output: {
filename: 'bundle.js',
},
plugins: [new webpack.optimize.UglifyJsPlugin()],
}, webpack))
.pipe(gulp.dest('./client/js'));
});