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);
Related
My current configuration is as follows:
output: {
filename: 'bundle.js',
path: OUT_DIR
},
However I need bundles.js to go to two directories?
Can I accomplish this by simply passing an array of directories to path?
Or do I need to do something more complex?
Currently I have a bash script cpll which I have to type in manually after each build and it is tedious.
Hopefully web pack has a configuration option to send the output to two or more locations.
Research
google search
This SO question is 4 years old and does not have what I am lookin for - so
The documentation does not mention a way to do it here - webpack.
If there is not a configuration option how can I have it run a bash command automatically?
I tried passing it an array of strings instead of a string and it crashed with the obvious error:
Invalid configuration object. Webpack has been initialised using a
configuration object that does not match the API schema.
- configuration.output.path should be a string.
Passing an array will not work. Hmmm.
Trying another approach starting with a google - search
Brings up a possible solution - so
per request - complete exportFunc
const exportFunc = ( env ) => {
console.log('webpack.config.js-exportFunc', OUT_DIR);
return {
entry: `${IN_DIR}/index.jsx`,
output: {
filename: 'bundle.js',
path: '/Users/c/_top/ll-front/dist'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.jsx?/,
include: IN_DIR,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react'],
plugins: ['#babel/plugin-proposal-object-rest-spread', '#babel/plugin-proposal-class-properties'],
}
}
}
]
}
};
};
module.exports = exportFunc;
You can use webpack's multi-compiler mode by exporting an array of configs.
As in the docs:
Instead of exporting a single configuration object/function, you may export multiple configurations (multiple functions are supported since webpack 3.1.0). When running webpack, all configurations are built.
For example:
const config = {
// your webpack config
}
const outputPaths = ["path/one", "path/two"]
module.exports = outputPaths.map(outputPath => {
return {
...config,
name: outputPath,
output: {
...config.output,
path: path.resolve(__dirname, outputPath)
}
}
})
As you're using a function config you can do something like this:
const outputPaths = ["path/one", "path/two"]
module.exports = outputPaths.map(outputPath => {
return env => {
return {
entry: `${IN_DIR}/index.jsx`,
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, outputPath)
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.jsx?/,
include: IN_DIR,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react'],
plugins: ['#babel/plugin-proposal-object-rest-spread', '#babel/plugin-proposal-class-properties'],
}
}
}
]
}
};
}
})
You could use multiple configurations instead. Here's the webpack documentation link.
To avoid code duplicaion consider your current config as an object. Then duplicate that object and override the output section of the duplicated object. Finally put both objects into an array. Use that array as your new config.
var yourCurrentConfig = {...};
var secondaryDestinationConfig = Object.assign(yourCurrentConfig, {
output: {
path: {
filename: 'bundle.js',
path: SECONDARY_DIR
}
}
});
var newConfig = [
yourCurrentConfig, secondaryDestinationConfig
];
(webpack.config.js file content below)
I'm trying to make a webpack exclusion on node modules.
I found that using webpack-node-externals works for it but using that on my common config causes this other error:
Require is not defined on reflect-metadata - __webpack_require__ issue
So... I was wondering how can i exclude webpack bundling also on the browser side without getting any issue.
My webpack version: 3.11.0
webpack-config.js
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('#ngtools/webpack').AotPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
var nodeExternals = require('webpack-node-externals');
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
//externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
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$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '#ngtools/webpack' },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: [ 'to-string-loader', 'style-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
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.browser.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(),
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
exclude: ['./**/*.server.ts']
})
])
});
// 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'
})
].concat(isDevBuild ? [] : [
// Plugins that apply in production builds only
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
exclude: ['./**/*.browser.ts']
})
]),
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder,
devtool: 'inline-source-map'
});
return [clientBundleConfig, serverBundleConfig];
};
GOT IT!
Before posting my solution, I'd like to thanks Aluan Haddad for his useful comment in my question above.
As suggested by Aluan, in fact, the problem was related to the need to use also a module loader, more than a module bundler.
So, the steps that I followed are these:
Installing requireJS ==> http://requirejs.org/docs/node.html
Removing externals: [nodeExternals()], // in order to ignore all modules in node_modules folder from my common webpack configuration and adding it under my server configuration (done before my question, but it's a really important step) [see webpack.config.js content in the question]
Adding target: 'node', before my externals point above, under my server side section (done before my question, but it's a really important step) [see webpack.config.js content in the question]
This makes sure that browser side keeps target:'web' (default target), and target becomes node just for the server.
launched webpack config vendor command manually from powershell webpack --config webpack.config.vendor.js
launched webpack config command manually from powershell webpack --config webpack.config.js
That worked for me! Hope It will works also for anyone else reading this question and encountering this issue!
I am new to Vue and Grunt/Gulp/Webpack. I got a Vue app to work fine (Grunt: browserify -> babel -> uglify) with a setup like this:
// app.js
const LoginComponent = require('./login.js')
// login.js
const template = `<some html>`
module.exports = Vue.component('login-component', {
template: template,
// component stuff
})
Then, in order to make my components more readable, I switched to single file components (Webpack, Grunt: babel -> uglify) and go everything to work like this:
// app.js
import LoginComponent from './login.js'
// login.js
<template>
<some html>
</template>
<script>
export defalut {
// component stuff
}
</script>
The problem is that when using webpack the file size is doubled. The first setup resulted in an app.min.js of 3.3kb, and the second setup with webpack was 7.0kb.
Is this normal or did I do something wrong?
My webpack.config.js looks like this:
var path = require('path')
module.exports = {
entry: './resources/js/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'resources/js/temp')
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
]
}
}
I don't see anything wrong with your config, sometimes webpack needs to generate some runtime code that might explain the increase of your bundle size.
However you can reduce it by using the DefinePlugin to set the NODE_ENV variable to production and leverage the UglifyjsWebpackPlugin, it will result in optimized code that will most likely be smaller, so something like the following
module.exports = {
entry: './resources/js/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'resources/js/temp')
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify('production') },
}),
new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false } }),
]
}
You can also specify the option dead_code to uglify so it trims out code that is never used, which might help in your case.
Also, you should get rid of Grunt entirely using the babel-loader and the appropriate presets.
Hi I am currently using webpack to bundle my project files into a single file. However, I do not want webpack to bundle my config.js file where all my config is set. I would like to this remain separate in the output folder but not sure out to achieve this.
my current setup is
//index.js file
#!/usr/bin/env node
'use strict';
let config = require('config.js);
let read = require('read.js);
console.log('i am running through command line');
//read.js file
'use strict'
console.log('read a text file');
//config.js
'use strict';
module.exports = {
name: 'test'
}
//webpack.config.js
let webpack = require('webpack');
let path = require('path');
let fs = require('fs');
let nodeModules = {};
fs.readdirSync('node_modules')
.filter(function (x) {
return [ '.bin' ].indexOf(x) === -1;
})
.forEach(function (mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
module.exports = {
entry: [ 'babel-polyfill', './index.js' ],
target: 'node',
node: {
__dirname: true
},
output: {
path: path.join(__dirname, 'webpack_bundle'),
filename: '[name].js',
libraryTarget: 'commonjs'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'shebang-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: [ 'es2015' ]
}
} ]
},
resolve: {
extensions: [ '.js' ]
},
plugins: [
new webpack.BannerPlugin({banner: '#!/usr/bin/env node', raw: true
})
]
,
externals: nodeModules
};
Note: I have significantly simplified the code example for brevity
Currently when i run the webpack command i get a folder webpack_bundle which contains an index.js file - the index.js file includes the dependencies config.js and read.js. However, what i would like is for the read.js dependency to be bundled into the index.js file but the config.js dependency to stay external in a separate file which gets required by the bundled webpack output. So the folder webpack_bundle should contain two files after running the webpack command - index.js and config.js. I have already tried to modify the externals by adding the following key value to the externals object config: './config.js' but this did not work. I also created an extra entrypoint by specifying config.js as the entrypoint but this also did not work. I can't figure this out and the webpack docs are not that clear on how to achieve this. Please help!
If you want your config in a separate bundle, you can create a split point, by importing dynamically your config.js file with require.ensure:
require.ensure([], function() {
let config = require('./config.js');
});
Your config will then be in a separate bundle.
Documentation about Code splitting (warning: Webpack 1.x is deprecated).
Documentation about Code Splitting (Webpack 2).
Edit:
If you don't want your config file to be bundled by Webpack, I think you can use IgnorePlugin:
module.exports = {
//...
plugins: [new webpack.IgnorePlugin(/^\.\/config\.js$/)]
}
And use copy-webpack-plugin to copy your config.js file.
I'd like to have structure like this
-Styles
--Main.scss
--SomeComponent.scss
-CompiledStyles
--Main.css
--SomeComponent.css
Actually I can only do this
-Styles
--Main.scss
--SomeComponent.scss
--All.scss (import all scss from file)
-CompiledStyles
--Main.css ( all css)
This is my webpack config
var Path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS2 = new ExtractTextPlugin('[name].css');
module.exports = {
devtool: 'eval',
entry: './Client/Styles/All.scss',
output: {
path: Path.join(__dirname, 'CompiledStyles'),
filename: 'page.js',
publicPath: '/CompiledStyles/'
},
module: {
loaders: [
{
test: /\.scss$/,
loader: extractCSS2.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader")
},
{
//IMAGE LOADER
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader'
},
{
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}
]
},
plugins: [
extractCSS2
]
};
Is it possible to compile this scss files to single css files ?
I really don't know how to manage this case. I've tried to assign entry: './Client/Styles' but it occures error.
EDIT:
I solved this with gulp.
The idea of webpack is to put everything that is needed in some JavaScript-files. So it's the intention to not build a css-file for every css-file.
If you want to still use webpack, try this in your webpack config:
module.exports = {
// ...
entry: {
'Main': './Client/Styles/Main.scss',
'SomeComponents': './Client/Styles/SomeComponents.scss',
},
// ...
}
I have updated the answer after adamo94 noted that he used gulp, so just for everybody else some more information. To convert scss files you need a sass/scss-processor. You can easily call that processor with a single call but as you usually do more with your sources it's likely to use some further processing.
Usually you would use gulp or grunt. Those can be configured to build everything that you need. They have different pros and cons, there are also further tools, but those are probably the ones that you'd like to take a look.