I want webpack to process js file (minify/uglify) but not format it as a module - so it would be just raw js file containing only the initial code (minified/uglified) without any webpackJsonp.
I need such a file to load it before webpack is loaded in a browser, to detect if custom font is loaded. If I use webpack module to do it then my bundle is loaded after font file is loaded.
Set your target to node in webpack.config.js (the default is web)
module.exports = {
target: 'node'
};
In the example above, using node webpack will compile for usage in a
Node.js-like environment (uses Node.js require to load chunks and not
touch any built in modules like fs or path).
Alternatively, if this is not appropriate for your use, you can also just change the libraryTarget in the output (assuming you are using CommonJS):
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js',
libraryTarget: 'commonjs'
},
libraryTarget: "commonjs" - The return value of your entry point will
be assigned to the exports object using the output.library value. As
the name implies, this is used in CommonJS environments.
You should have (depends on version) scripts() or babel() methods that only minify instead of js() that webpackfy also:
mix.js('resources/js/app.js', 'public/js/app') //this add a webpack module
.scripts(['resources/js/scrips/raw.js', 'resources/js/scrips/raw2.js',], 'public/js/raws.js')//this add a minified js
.babel(['resources/js/scrips/raw3.js', 'resources/js/scrips/raw4.js',], 'public/js/raws_retrocompatible.js')//this add a minified js, but using babel compiler
Related
I have a project that works perfect and was written in TS, I had to convert it to plain JS and it works for the most part. The issue where I am struggling is removing the default WebPack loader after the files have been combined and minified, WebPack includes a loader to the final output even thought I do not need a loader since all the files are combined into one large file.
+ filea.js
+ fileb.js
+ filec.js
+ filed.js
-> output bundle.js
I have read a few articles/posts that recommend manually creating a config file providing the name of each of the files that will combined and minified, this may work OK but the problem is that the project I am working on is broken into small chunks (modules) so that tools such WebPack can be smart enough and know when a file should be added as a dependency in the final output.
I know we can combine and minify multiple individual JS files but when it comes to exporting a single file it seems like the task is trivial With TS but in the vanilla JS world there is little or no information about the subject.
I don't understand something, do you want to have one big file or small individual modules (chunks)?
An example of small modules:
module.exports = {
entry: {
app: './src/app.js',
admin: './src/admin.js',
contact: './src/contact.js'
}
};
Another method is one main module and it contains all smaller modules.
module.exports = {
entry: {
app: './src/app.js'
}
};
You can also use something like lazy loading. Then the modules (chunks) will be dynamically loaded only when needed. lazy-loading
Here is an example of using several entries webpack-boilerplate.
Sounds like you have a project with several JS files and you want to use webpack to bundle all of them and minify the result.
Webpack was built for this.
You'll need to add a build step in your package.json like this:
"scripts": {
"build": "webpack --config prod.config.js"
}
Then you'll need to create a webpack.config.js with a module.exports block that has an entry point and rules to include in your project. The following should be a minimal setup that can get your started:
const path = require('path');
module.exports = {
entry: "./your/path/to/src",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {},
plugins: [
new MinifyPlugin(minifyOpts, pluginOpts)
]
}
You can add modules that perform additional code transpilation for files that matcha a certain regex. You can also use a plugin to perform minification such as babel-minify-webpack-plugin as documented here https://webpack.js.org/plugins/babel-minify-webpack-plugin/. (Note you will need to add this dependency.)
The full webpack configuration can be found here: https://webpack.js.org/configuration/
I'm migrating a web app from requireJS to webpack.
With requireJS, I have different configurations depending on the environment.
For live environment I use r.js to minify and bundle all of my
modules and their dependencies into a single file. Afterwards, I add
almondJS to manage the dependencies and then I load my js bundle like the following:
<script src="bundle.min.js"></script>
For my development environment, I Load requireJS like this:
<script src="require.js" data-main="/main-config"></script>
and requireJS will use my configuration file specified by data-main, to load modules and their
dependencies asynchronously
As you can see, with requireJS module loading and bundling are two separate processes and that allows me to debug AMD modules during development without needing sourcemaps
How can I achieve this scenario using webpack as a module loader only without bundling during development ?
If this is not possible, is there any other way I can see my source files in the browser debugger without generating sourcemaps?
How can I achieve this scenario using webpack as a module loader only without bundling during development ?
Webpack will always bundle, despite the envieronment.
If this is not possible, is there any other way I can see my source files in the browser debugger without generating sourcemaps?
If your code is transpiled/compiled, you'll need sourcemaps to see that. There is no way to workaround that.
It's true that if your code is transpiled then you'll need sourcemaps. But it is possible to get around bundling though. Yes, webpack will really always try to bundle, but with plugins the code can be taken out of the bundle and placed in the output directory as if it was simply run through the transpiler.
I have a node application that I want to simply transpile to ES5 file-by-file and not bundle anything. So my config to do that is roughly this:
let config = {
entry: [
glob.sync(srcDir + '/**/*.js') // get all .js files from the source dir
],
output : {
filename : '[name].rem.js', // webpack wants to bundle - it can bundle here ;)
path: outDir
},
resolve: {
alias: {
'app': appDir
}
},
plugins: [
new RemoveEmptyScriptsPlugin({extensions: ['js'], scriptExtensions: /\.rem\.js/}) // for all .js source files that get bundled remove the bundle .rem.js file
],
module: {
rules:[{
test: /\.jsx?$/,
type: 'asset/resource', // get webpack to take it out instead of bundling
generator: {
filename: ({filename}) => filename // return full file name so directory structure is preserved
},
use: {
loader: 'babel-loader',
options: {
targets: { node: 16 },
presets: [
['#babel/preset-env', { modules: 'commonjs' /* transpile import/export */}],
]
}
}
}]
}
};
// Since the code does not go through the full pipeline and imports are not getting resolved, aliases will remain in the code.
// To resolve them it takes to hack the aliases object into the babel config
config.module.rules[0].use.options.plugins.push(['babel-plugin-webpack-alias-7', {config: {resolve: {alias: config.resolve.alias}}}];
But then it appeared that the currently published babel-plugin-webpack-alias-7 does not support providing an Object to the config option so I had to patch the plugin https://github.com/shortminds/babel-plugin-webpack-alias-7/pull/22
Ah, and then the webpack-remove-empty-scripts plugin had an issue with my idea so I had to patch that too https://github.com/webdiscus/webpack-remove-empty-scripts/pull/6
I have a React nodejs app running on EC2.
I have set up 3 instances of it beyond Nginx for the load balancing.
I have also enabled cache in the Nginx configuration.
Basically everything should be cached beside different versions of app.js which holds the bundled React code and style.css which is also bundled.
I would like to add a version number in the js and css src link (e.g http://mywebsite.com/app.js?1.0)
My question is, can I automate this operation with webpack? Is this the way to go?
html-webpack-plugin is your friend here.
Instead of creating your index.html file, allow webpack to do it for you.
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./index.js",
output: {
filename: "./dist/app.bundle.[hash].js"
},
plugins: [
new HtmlWebpackPlugin({
hash: true,
filename: './dist/index.html'
})
]
}
This will add the output script into index.html automatically and will generate a hash for the file.
I am using webpack to turn my ts in js. I want the js files to be placed at the same location as their ts sources. right now I am 'cheating' by having many entry points. the entry points are the path to the file.
here is the snippet of my config
entry: {
'path/to/my/file':'path/to/my/file.ts',
'other/path/to/other/file':'other/path/to/other/file.ts'
},
output: {
path: rootFolder,
publicPath: outputFolderName + '/',
filename: '[name].js'
}
this currently works. I was wondering if there was a cleaner way to do this. Some way of not depending on having the name of the entry point be the path so that the entry points are more flexible.
You are using wrong tool for this job. Webpack is bundler, it is designed to bundle many files into single package.
What you want to do is to compile Typescript into Javascript. Use typescript compiler for that. Just use/run tsc.
Just make sure outDir in tsconfig.json is equal . or absent at all.
You might need to install it globally for ease of use
npm install -g typescript
I want to create a frontend library.
Therefore I want to use webpack. I especially like the css and image loader.
However I can only require non-JS files if I am using webpack.
Because I am building a library, I cannot garanty that the user of my library will too.
Is there I way to bundle everything into a UMD module to publish it?
I tried using multiple entry points, however I cannot require the module then.
You can find good guide for creating libraries in Webpack 2.0 documentation site. That's why I use ver 2 syntax in webpack.config.js for this example.
Here is a Github repo with an example library.
It builds all files from src/ (js, png and css) into one JS bundle which could be simply required as an umd module.
for that we need to specify the follow settings in webpack.config.js:
output: {
path: './dist',
filename: 'libpack.js',
library: 'libpack',
libraryTarget:'umd'
},
and package.json should have:
"main": "dist/libpack.js",
Note that you need to use appropriate loaders to pack everything in one file. e.g. base64-image-loader instead of file-loader
The comment written by #OlegPro is very helpful. I suggest every one to read this article for explanation of how these stuff work
http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6
You need the following for sure if you want to be able to import the bundle file in your project
output: {
path: path.resolve(__dirname, myLibrary),
filename: 'bundle.js',
library: "myLibrary", // Important
libraryTarget: 'umd', // Important
umdNamedDefine: true // Important
},