What is webpack?
Webpack is a powerful module bundler. A bundle is a JavaScript file that incorporate assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file. Webpack roams over your application source code, looking for import statements, building a dependency graph, and emitting one (or more) bundles. With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files. You determine what Webpack does and how it does it with a JavaScript configuration file, webpack.config.js.
Webpack installation
In order to use webpack you need to have node.js installed. If you don't have node.js in your machine, please install it first.
Below command will install webpack globally.
npm install webpack -g
//-g will install it globally
Generate you first bundle file
First of all Create a .js file and write few lines of JavaScript code.
/*===test.js=== */
documet.write('Welcome to webpack tutorial');
Use the below commad to generate the bundle file
webpack ./test.js bundle.js
// test.js is source file and mybundle.js is generated bundle file
Above command will take test.js as source file and generate a bundle file bundle.js. So the first argument is the source file and the last argiument is the bundle file(which will be generated by webpack. NOTE: You can give any name to your bundle file.
Create a HTML file
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js" charset="utf-8" ></script>
</body>
</html>
Simple configuration Example:
{
context: __dirname + "/app",
entry: "./entry",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
}
}
entry is the entry point for the bundle. If you pass a string: The string is resolved to a module which is loaded upon startup. So here in
above example context: __dirname + "/app" is the directory of entry point and entry: "./entry" is the entry file name.
The output of will be a bundle file filename: "bundle.js". You can give any name to bundle file.
If you pass an array for enry point: All modules are loaded upon startup. The last one is exported.
entry: ["./entry1", "./entry2"]
If you pass an object: Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.
{
entry: {
page1: "./page1",
page2: ["./entry1", "./entry2"]
},
output: {
// Make sure to use [name] or [id] in output.filename
// when using multiple entry points
filename: "[name].bundle.js",
chunkFilename: "[id].bundle.js"
}
}
Loaders
Module Loader
In order to use webpack you need to have node.js installed. If you don't have node.js in your machine, please install it first.
Below command will install webpack globally.
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: loaderPresets
}
}, {
test: /\.css$/, loader: 'style-loader!css-loader' //CSS Loader
}, {
test: /\.less$/, loader: 'style-loader!css-loader!less-loader' //Less Loader
}, {
test: /\.json$/, loader: 'json-loader' //JSON Loader
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?name=/[hash].[ext]&limit=10000&mimetype=application/font-woff' // Font .woff Loader
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?name=/[hash].[ext]&limit=10000&mimetype=application/font-woff' // font .woff2 Loader
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?name=/[hash].[ext]&limit=10000&mimetype=application/octet-stream'// .ttf image Loader
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader' //File Loader
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/svg+xml' //.svg image Loader
}, {
test: /\.(jpg|png)$/,
loader: 'file?name=/[path][name].[hash].[ext]' // .jpg/.png image loader
}]
}
Config file
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
}, {
test: /\.css$/, loader: 'style-loader!css-loader'
}, {
test: /\.less$/, loader: 'style-loader!css-loader!less-loader'
}, {
test: /\.json$/, loader: 'json-loader' //JSON Loader
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?name=/[hash].[ext]&limit=10000&mimetype=application/font-woff'
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?name=/[hash].[ext]&limit=10000&mimetype=application/font-woff'
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?name=/[hash].[ext]&limit=10000&mimetype=application/octet-stream'
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader' //File Loader
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
}, {
test: /\.(jpg|png)$/,
loader: 'file?name=/[path][name].[hash].[ext]'
}]
}
Pretty output
while starting server we can pass few optional command as well
webpack-dev-server --progress --colors --inline --hot --port 8080 --host 172.168.35.86
--colors give a colourful output at console
--inline embed the webpack-dev-server runtime into the bundle.
--hot adds the HotModuleReplacementPlugin and switch the server to hot mode. Note: make sure you don’t add HotModuleReplacementPlugin twice.
--hot --inline also adds the webpack/hot/dev-server entry.
--lazy no watching, compiles on request (cannot be combined with --hot)
--port You can manullay assign the port no (EX: 8080)
--host You can manullay assign the host ip address (EX: 172.168.35.86), now you can access your application over a
network. EX: http://172.168.35.86:8080
You can nuse webpack-dev-server for development. Install it globally.
npm install webpack-dev-server -g //webpack server innstalled globally
webpack-dev-server --progress --colors //this will start a server in dev mode
0 Comments