I am using webpack for a project where I need to have a javascript config file as part of the built files, but I cannot figure out how to do that.
So I need to have these files in the output:
index.html
app.js
config.js
I figure I need to either:
1) Copy the config.js file from the source folder to the build folder with CopyWebpackPlugin, or
2) Include the file in the compiled bundle and then extract it with ExtractTextWebpackPlugin.
I have tried dozens of different ways of configuring this, but when trying with the copy method, I get the file both inside the app.js bundle AND as a separate file. When I try with the extract method, I cannot seem to figure out how to extract javascript from the main bundle. The docs all seem to explain how to extract css.
How would I go about something like this?
You should be able to accomplish this by using multiple entry points.
https://webpack.js.org/concepts/entry-points/
entry: {
main: './path/to/file/app.js',
config: './path/to/file/config.js'
}
output: {
filename: 'output/path/[name].js'
}
A more complex option, which is typically used for vendor files, would be to use code-splitting.
https://webpack.js.org/guides/code-splitting/
Related
I've stumbled upon several pages about importing external files into a Nuxt project, but what I'm trying to do is the opposite.
I have two sites or apps: Site A and Site B. Site A is the main one built using Nuxt. Site B is a simple site with static pages, not using Nuxt or Vue.
Site A has a JavaScript file, let's say its path is /lib/common.js. I use it extensively on Site A. And I also want to use it on Site B.
However, when I do yarn generate on Site A, all my JS files, including common.js, get bundled into a JavaScript chunk files, and each file is named with a hash of the content of the file. For example, /lib/common.js, /lib/util.js get bundled up as /dist/_nuxt/05443d2eb25fc282bbea.js while /lib/user.js is bundled as /dist/_nuxt/1326d0fc90870f9f4ca4.js.
That means:
the file I want to use is actually bundled with other files into the same package, so if I load that file, I have to load extra code with it and,
I can't really predict the name of that file.
Is there a way for me to tell Nuxt, or most likely Webpack, to single out /lib/common.js into its own bundle and then save it as /dist/_nuxt/lib/common.js instead of a hash, so the filename is more predictable?
You would need to create a separate webpack configuration for that single file to achieve the desired result as only one output configuration per configuration file is supported[0].
[0] https://github.com/webpack/docs/wiki/configuration#output
Example common library configuration common.lib.config.js
var path = require('path');
module.exports = {
entry: './lib/common.js',
output: {
path: path.resolve(__dirname, 'dist/_nuxt/lib'),
filename: 'common.js'
}
};
And build it with webpack --config common.lib.config.js
I just began using Vue and I'm hitting a wall while trying to compile SCSS into separate files. I understand that any SCSS that I'm writing within components will be compiled into a single file (/dist/css/app[hash].css), but I would like separate files which aren't imported into any component for external use.
I have several SCSS files (frames.scss, lists.scss, and tables.scss ) that I would like to be compiled, minified, and prefixed into their own CSS files alongside the aforementioned CSS file.
I would like the build structure to look something like this (with the external CSS file existing alongside the app CSS file):
dist/
css/
app[hash].css
frames.css
lists.css
tables.css
I have very little experience with Webpack, so my vue.config.js file is currently empty and my postcss.config.js file is below:
module.exports = {
plugins: {
autoprefixer: {}
}
}
I've searched all over StackOverflow for a solution to no avail, so any help would be greatly appreciated!
For webpack 4, I think you want to look at mini-css-extract-plugin.
its a webpack plugin that, by, default, creates different files per input. You can use this with scss as you would expect. https://stackoverflow.com/a/53180597/6646536 might be a good example.
There is a similar tool i've used for webpack 3 here:
https://github.com/webpack-contrib/extract-text-webpack-plugin
How can I merge a third party javascript file into my webpack bundle without getting checked on modules etc?
Because my third party javascript file is already bundled.
Well, the ideal would be for it to be bundled together, but you can work around this problem.
First, make sure it is imported somewhere on your dependency tree (webpack only knows about your file if it is imported).
Now, to be able to use external files, you have to use the external configuration.
For eg:
module.exports = {
//...
externals: {
jquery: 'jQuery'
}
};
States to webpack that this is going to be available as an external resource when this application is loaded.
Now you can add your already bundled file to your index.html and serve to the user.
I'm using Webpack with Storybook and need to include a JavaScript library file in an HTML file via a script tag. Unfortunately, I get a 404 error indicating that the file was not found (the file's path is based on my local filesystem and is correct). How do I inform Webpack regarding where to look for my library or "static" files?
Add files in entry object in webpack.config.js
entryPoint = {
app: ['path/to/script', 'path/to/script2','./index.js'],
};
This will make sure that you have the library loaded when you have run index.js (entry point of project).
More on Webpack entry points.
I think that I've got how Webpack works. My problem is: Most tutorials/examples are based on a single index.html. So, how would I organize my webpack.config.js and directory structure for multiple pages?
Let's assume that I need the following things:
index.html with a css and js file
dashboard.html with a css and js file
profile.html with a css and js file
And here is what I don't get:
How would you structure your src and dist folder?
How do I have to configure Webpack? Probably with HtmlWebpackPlugin(?)
Is a single index.js file enough as entry point / How does one structure the index.js file / How do ES6 projects look in general?
A sample project would help a lot. A project with more than just an example index.html file.
Have a good day! :)
I think u can do that by convert html+js+css into web component and u can do that easily by a framework , i think Vue js give very good boilerplate full Webpack template to let u do that just start to think about the other page as a new component remember that u r using webpack to get a bundle
So you can have one watch output multiple bundle types by passing in a command line arg to build the right bundle. There can be multiple entry points in webpack but webpack is only build to output one bundle. So, to solve this issue I figured passing a command line arg to webpack is a clean way of having multiple bundle possibilities while maintaining only one config file.
To see how this can be accomplished checkout...
https://www.hipstercode.com/blog/27/