Webpack Basic Usage

This article experiences the fundamentals of Webpack and an example.

What is Webpack

Module bundler
Module with dependencies
Module generates static assets

Why Webpack

Good for development but also the user experience
Loaded on Demand
Cache Friendly
Webpack plugins can be injected to into the build process

First use of Webpack, CLI, command line Interface

→ Confirm that the Nodejs is installed
Npm-v
→ Install Webpack
NPM Install Webpack-g
→ Create a simple website
..... webpacktest/
..... app.js
..... index.html
→ Navigate to the folder where Webpacktest is located
→ use Webpack for app.js files
Webpack./app.js bundle.js
→ We see an extra bundle.js file in the Webpacktest directory
→ Now, you can reference the Bundle.js file in index.html instead of the App.js file

To add a configuration file to a project

→ Create the name webpack.config.js file under the project root directory
Once we have set up the Webpack.config.js file, each time we navigate to the project, we can use the functions as long as the Webpack command is used.
Module.exports = {
Entry: "./app.js",
Output: {
FileName: "Bundle.js"
}
}
→ Command line to the site that needs Webpack
→ Direct input webpack command
Webpack

Enable Webpack Viewer mode

When the configuration of webpack.config.js changes, if each time to manually enter the Webpack command to generate JS file, it seems relatively troublesome. Webpack provides us with an observer pattern that, when enabled, changes in any webpack.config.js will be observed and automatically generated by the final JS file.

→ Command line to the site that needs Webpack
→ Enable viewer mode
Webpack--watch
→ Add watch field to Webpack.config.js and set to True
Module.exports = {
Entry: "./app.js",
Output: {
FileName: "Bundle.js"
},
Watch:true
}
→ In this way, bundle.js files are updated automatically each time you modify the reference file in Webpack.config.js.

Install Enable Webpack Devserver

→ Navigate to the target site Directory
→ Enter NPM command to install Webpack Devserver
NPM Install Webpack-dev-server-g
→ Enter webpack-dev-server command
Webpack-dev-server
→ See roughly the following content
Http://localhost:8080/webpack-dev-server
Webpack result is served from/
Cotent is served from d:\ ...
Hash: ...
version:webpack1.12.4
Time:94ms
...
Webpack:bundle is now VALID.
→ Enter in the browser: http://localhost:8080/webpack-dev-server/
Also displays the contents of Console.log and document.write in the App.js file.
→ Modify the files that are dependent on the webpack.config.js and save them, and the content in the browser will be updated automatically.

→ What if you don't want to show console.log content?
→ Enter in the browser: http://localhost:8080/
→ At this time, and then modify the dependent files in the Webpack.config.js and save, the content of the browser will not be updated?
→ Go back to the command line and add an inline flag
Webpack-dev-server--inline
→ At this point, if you modify the dependent files in the Webpack.config.js and save, the content in the browser will be updated automatically?

Bundling multiple Files

→ Add a login.js file under the project
Console.log (' login Loaded ');
Referencing login.js files in →app.js
Require ('./login ');

document.write ("Welcome to Big Hair concerts!! Baby ");
Console.log (' App loaded ');
→ Enter in the browser: http://localhost:8080/
can see the change.
→ Add a utils.js file under the project
Console.log (' Logging from the Utils.js file ... ');
→ Come to webpack.config.js under configuration as follows:
Module.exports = {
Entry: ["./utils", "./app.js"],
Output: {
FileName: "Bundle.js"
},
Watch:true
}
→ Command line navigation to the current project
→ Re-enable webpack Devserver
Webpack-dev-server
→ The corresponding changes are reflected in the http://localhost:8080/

An example

→ Create a folder called Demo

→ Command line navigation to the Demo folder

→ Create Package.json file

NPM Init
Then enter the various information in the command window or press ENTER to confirm it until the Package.json file is finally created under demo.

{
"Name": "Demo",
"Version": "1.0.0",
"description": "Some description about demo",
"Main": "Index.js",
"Scripts": {
"Test": "Echo \" Error:no test specified\ "&& exit 1"
},
"Author": "Darren",
"License": "ISC"
}

→ create webpack for the current demo project

NPM intall Webpack--save-dev

After successful operation

The Node_modules folder is more in the demo folder
More configuration about Webpack in Package.json

{
"Name": "Demo",
"Version": "1.0.0",
"description": "Some description about demo",
"Main": "Index.js",
"Scripts": {
"Test": "Echo \" Error:no test specified\ "&& exit 1"
},
"Author": "Darren",
"License": "ISC",
"Devdependencies": {
"Webpack": "^1.12.5"
}
}

Now you can use various commands in the command-line window under the current demo project.

→ Enter the following command to view Webpack's command syntax

Webpack-h

→ Create a webpack.config.js file under Demo

Module.exports = {
Entry: './main.js ',
Output: {
FileName: ' Bundle.js '
}
};

→ Create a main.js under Demo

document.write ("Webpack for the win!");

→ Run the webpack command under Demo

Webpack

Run successfully, in the demo under a more Bundle.js file.

→ Add index.html under Demo

<script type= "Text/javascript" src= "Bundle.js" ></script>
<body>
</body>

→ Create a second.js under Demo

Module.exports = document.write ("Oh Yeah another file");

→ reference second.js file in Main.js

Require ('./second.js ');
document.write ("Webpack for the win!");

→ Use the webpack command under the current demo project

Webpack

found that the Second.js file has been referenced to the Bundle.js file.

→ Use the webpack-p command under the current demo project

Webpack-p

In this way, the contents of the Bundle.js file are compressed.

→ add loader to the current project

Various loader here: http://webpack.github.io/docs/list-of-loaders.html

Like adding a coffeescript loader

NPM Install Coffee-loader--save-dev

After a successful run.

There is one more Coffee-loader subfolder under the Node_modules folder.
More Coffee-loader-related configurations in Package.json

{
"Name": "Demo",
"Version": "1.0.0",
"description": "Some description about demo",
"Main": "Index.js",
"Scripts": {
"Test": "Echo \" Error:no test specified\ "&& exit 1"
},
"Author": "Darren",
"License": "ISC",
"Devdependencies": {
"Coffee-loader": "^0.7.2",
"Coffee-script": "^1.10.0",
"Webpack": "^1.12.5"
}
}

Add Coffee-loader related in Webpack.config.js

Module.exports = {
Entry: './main.js ',
Output: {
FileName: ' Bundle.js '
},
Module: {
Loaders: [
{test:/\.coffee$/, Loader: "Coffee-loader"}
]
}
};

Add the Third.coffee file under demo.

Alert "Webpack is boss!"

Reference the Third.coffee file in Main.js.

Require ('./second.js ');
Require ("./third.coffee");
document.write ("Webpack for the win!");

Run the Webpack command and have more content associated with the Third.coffee file in the bundle.js.

→ add css and pictures

The command line navigates to the demo folder and runs as follows:

NPM Install Style-loader css-loader url-loader--save-dev

After running successfully, in the Node_modules more Css-loader, Style-loader, in Package.json also more related configuration:

{
"Name": "Demo",
"Version": "1.0.0",
"description": "Some description about demo",
"Main": "Index.js",
"Scripts": {
"Test": "Echo \" Error:no test specified\ "&& exit 1"
},
"Author": "Darren",
"License": "ISC",
"Devdependencies": {
"Coffee-loader": "^0.7.2",
"Coffee-script": "^1.10.0",
"Css-loader": "^0.22.0",
"Style-loader": "^0.13.0",
"Webpack": "^1.12.5"
}
}

In Webpack.config.js, add the following configuration:

Module.exports = {
Entry: './main.js ',
Output: {
Path: './build ',//This is where images and JS would go
Publicpath: ' http://yoururl.com/',//This was used to generate URLs
FileName: ' Bundle.js '
},
Module: {
Loaders: [
{test:/\.coffee$/, Loader: "Coffee-loader"},
{test:/\.css$/, Loader: ' Style-loader!css-loader '},
{test:/\. (png|jpg) $/, loader: ' url-loader?limit=8192 '}
]
}
};

Note that in output, build is used to store the generated bundle.js and picture files. Publicpath is used to store website addresses.

Modify the reference path in the index.html file.

<script type= "Text/javascript" src= "./build/bundle.js" ></script>
<body>
</body>

Add the Image.coffee file under demo.

IMG1 = document.createelement ("img")
IMG1.SRC = require ("./your-small-image.png")
Document.body.appendChild IMG1

Img2 = document.createelement ("img")
IMG2.SRC = require ("./your-big-image.png")
Document.body.appendChild Img2

Add require ("./image.coffee") to Main.js

Require ('./second.js ');
Require ("./third.coffee");
Require ("./image.coffee");
document.write ("Webpack for the win!");

Create a Styles.css file under demo.

Body {
Background:tomato;
}

Add require ("./styles.css") to Main.js

Require ('./second.js ');
Require ("./third.coffee");
Require ("./image.coffee");
Require ("./styles.css")
document.write ("Webpack for the win!");

Run the Webpack command.

Webpack Basic Usage