in react using webpack every js files is bundle into a single bundle.js , for my normal html , css, js application for example , i am having 6 libraries. for an example consider
i am using jquery and bootstrap min versions. so if i reference two files the request will be two. so how can i make it into a single file. So there will be a single request.
like when i checked the file size is about in kb's and the request is processed within less that 1 or 2 seconds , like the chrome dev tools shows the time for to load also it parrallely loads the two files.
But how can i bundle the two librarys using webpack and get a single file that i can refer in my application.
i am a beginner to webpack
You need to import them in your entry point file and Webpack will handle the bundling. As you have worked with React, I assume you have basic command line skills.
You can read the Getting Started guide which bundles Lodash like how you are trying to bundle jQuery and Bootstrap.
First of install, ensure that you are installing jQuery, Bootstrap, and any other libraries using npm (or yarn, if you prefer):
# Install Webpack as a dev dependency
npm install webpack webpack-cli --save-dev
# Install dependencies (I've added Popper.js as Bootstrap requires it)
npm install jquery bootstrap popper.js
Create a folder called src and a file inside there called index.js. This is your entry point and Webpack will look for this file unless configured differently. Import the libraries like this:
import $ from 'jquery'
import 'bootstrap'
// Do something with jQuery
$(document).ready(() => console.log('Hello world!'))
Then run Webpack using npx:
npx webpack
A file named main.js should be created in a folder called dist that contains the bundled code. This is your output file. You can use a <script> tag in your HTML file to load this JavaScript:
<!-- assuming your index.html is in the dist folder -->
<script src='main.js'></script>
Once you get here, you can explore more advanced things like importing Bootstrap components individually, minifying code, multiple bundles, transpiling TypeScript, etc.
You will likely need to add a Webpack configuration file very soon as there is only so much that can be done using zero-config mode.
Good practice is to keep two sepearate bundles for the application logic and external libraries and in webpack this can be achieved by the following code,
app.js - appliation index file,
vendors.js - import all external libraries in this file
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
To get a single file, import vendors.js file inside app.js file and give entry key in webpack as
entry: './src/app.js'
Let us assume that you have the files in src directory. You can merge multiple files by specifying them in webpack.config.js to have a single named file as an output. I hope this is what you are looking for.
const path = require('path');
module.exports = {
entry: {
'bundle.js': [
path.resolve(__dirname, 'src/file1.js'),
path.resolve(__dirname, 'src/file2.js')
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [{
exclude: /node_modules/
}]
}
};
As above, the two files "file1.js" and "file2.js" will be combined into a single file "bundle.js" and stored in "dist" directory.
You can also exclude node_modules by specifying a rule in module object of webpack configuration.
Related
I am setting bundling in my node project with webpack. I have created webpack config file to bundle file. but after including bundle file I got an error.
I am trying to bundle jquery file into output path. I am able to bundle It using below webpack.config.js code.
var path = require('path');
module.exports = {
target: 'web',
output: {
path: path.resolve(__dirname, "./public/javascripts"),
filename: "bundle-jquery.js",
},
entry: './bower_components/jquery/dist/jquery.min.js'
}
Now I am including output path which is bundled into script src replacing jquery. But its not working and I am getting "$ not defined error". By viewing bundled file, I found that there is an extra code added at start into bundled file.
You are doing it completely wrong. If you want jquery in your project, you should import it in your code.
Entry should be your main.js or whatever your entry file is called. Then in main.js do:
import $ from 'jquery' // or use relative path
Webpack will then bundle jquery for you.
I installed vuejs with a npm install in my assets/ folder and I created a list_show.js file in priv/static/js/list_show.js . When I do import Vue from "vue" in my list_show.js, it doesn't work and I get this message in the console: "Uncaught SyntaxError: Unexpected identifier".
How can I import modules in my static/js/ folder? (I'm using Phoenix 1.4 and Webpack by default)
You should not create your .js files in the /priv/static/js directory. Instead, use the /assets directory.
Phoenix 1.4 uses Webpack to bundle js files located in /assets into a single app.js file which will be placed into /priv/static/js. As an entry point to your application, you can use /assets/js/app.js where the following lines load Vue:
import Vue from 'vue';
new Vue({
// ...
});
(You can also put this code in a seperate .js file, as long as you import it in app.js)
This solution, however, won't help if you need static js files for different routes. You maybe want to always render priv/static/js/app.js, but specific files just on specific layouts. Achieving multiple output files in priv/static/js can be done by modifying your webpack.config.js slightly and adding more entrypoints:
entry: {
app: ['./js/app.js'].concat(glob.sync('./vendor/**/*.js')),
special: ['./js/special.js']
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../priv/static/js')},
}
With this config, two files will be created:
priv/static/js/app.js - Containing all vendor files and app.js
priv/static/js/special.js - Containing just special.js
The special.js file can be included within Phoenix then:
<script type="text/javascript" src="<%= Routes.static_path(#conn, "/js/special.js") %>"></script>
I have used node to manage dependencies on React apps and the like, in those you use package.json to keep track of libs and use them in your scripts using ES6 import module syntax.
But now I'm working on a legacy code base that uses a bunch of jQuery plugins (downloaded manually and placed in a "libs" folder) and links them directly in the markup using script tags.
I want to use npm to manage these dependencies. Is my only option:
run npm init
install all plugins through npm and have them in package.json
link to the scripts in the node_modules folder directly from the markup:
<script src="./node_modules/lodash/lodash.js"></script>
or is there a better way?
Check out this tutorial for going from using script tags to bundling with Webpack. You will want to do the following: (Do steps 1 and 2 as you mentioned in your question then your step 3 will change to the following 3 steps)
Download webpack with npm: npm install webpack --save-dev
Create a webpack.config.js file specifying your entry file and output file. Your entry file will contain any custom JS components your app is using. You will also need to specify to include your node_modules within your generated Javascript bundle. Your output file will be the resulting Javascript bundle that Webpack will create for you and it will contain all the necessary Javascript your app needs to run. A simple example webpack.config.js would be the following:
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
resolve: {
alias: {
'node_modules': path.join(__dirname, 'node_modules'),
}
}
};
Lastly, add a <script> tag within your main HTML page pointing to your newly generated Javascript bundle:
<script src="dist/my-first-webpack.bundle.js"></script>
Now your web application should work the same as before your refactoring journey.
Cheers
I recommend Parcel js.
Then you only need:
Run npm init
Install dependency, for example npm install jquery
Import with ES6 syntax: import $ from "jquery";
And run with parcel
Noob here (also couldn't find proper documentation).
So I was trying to implement gulp.js with jekyll. In order to do so, I wanted to concat javascript files into a single bundle. Now I can do that by hand, hard-coding every dependency and piping it through gulp-concat. But, I found out webpack does this thing pretty neatly. (PS: I was following https://ixkaito.github.io/frasco/). So now I installed webpack via npm, and tried to run my site, but it threw uncaught expression error. My directory tree is like this:
-js
----vendor
-------jquery.js
-------anime.js
----other
-------some-other-js-files.js
...
-main.js
Now I want to make bundle.js files using this, so that webpack can automatically detect the correct dependency and import it. Am I supposed to require('jquery') and do the same for all dependency in main.js?
My webpack config is
entry: [
"main.js",
]
Thanks
I'm comparing how RequireJS and Webpack works, and there's something I still don't get:
RequireJS is loaded in the browser through a <script> tag, e.g.:
<script data-main="scripts/main.js" src="scripts/require.js"></script>
In its simplest implementation, it uses the data-main attribute to set its base path and loads asynchronously every js in it
Webpack works in Nodejs environment. You install it via npm install cmd. Then you set the entry point and other stuffs in the webpack.config file
module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js'
}
};
When you run webpack cmd your entry point is read and its dependencies are loaded and bundled together in the output file (in this case, app.bundle.js).
This two behaviors seems to me really differents (RequireJS run and loads in browser, Webpack in Node), and I don't understand why this two module system are mentioned as interchangeable.
In particular it seems to me that webpack doesn't do anything special, it only concatenates a bunch of js together. What am I missing?