Basic Webpack usage and Webpack usage

Basic Webpack usage and Webpack usage

 

This article provides an example of the fundamentals of Webpack.

■ 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 into the build process

 

■ Use Webpack for the first time and CLI, that is, Command Line Interface

 

→ Confirm whether NodeJS is installed
Npm-v
→ Install Webpack
Npm install webpack-g
→ Create a simple website
... Webpacktest/
...... App. js
..........Index.html
→ Navigate to the webpacktest folder
→ Use webpack for app. js files
Webpack./app. js bundle. js
→ We can see that a bundle. js file is added to the webpacktest directory.
→ Now, you can reference the bundle. js file in index.html, instead of the app. js file.

■ Add a configuration file to the Project

 

→ Create a file named webpack. config. js under the project root directory
After setting the webpack. config. js file, every time we navigate to the project, we can use all the functions by using the webpack command.
Module. exports = {
Entry: "./app. js ",
Output :{
Filename: "bundle. js"
}
}
→ Use the command line to go to a website that requires Webpack
→ Directly enter the webpack command
Webpack

 

■ Enable Webpack observer Mode

 

When the configuration of webpack. config. js changes, it is relatively troublesome to manually enter the webpack command every time to generate the js file. Webpack provides the observer mode for us. After it is enabled, changes in any webpack. config. js will be observed and the final js file will be automatically generated.

 

→ Use the command line to go to a website that requires Webpack
→ Enable observer Mode
Webpack -- watch
→ Add the watch field to webpack. config. js and set it to true.
Module. exports = {
Entry: "./app. js ",
Output :{
Filename: "bundle. js"
},
Watch: true
}
→ In this way, the bundle. js file will be automatically updated every time you modify and save the file referenced in webpack. config. js.

■ Install and enable Webpack DevServer

 

→ Navigate to the target website directory
→ Enter the npm command to install Webpack DevServer
Npm install webpack-dev-server-g
→ Enter the webpack-dev-server command
Webpack-dev-server
→ See 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: 94 ms
...
Webpack: bundle is now VALID.
→ Enter http: // localhost: 8080/webpack-dev-server/in the browser/
The console. log and document. write contents in the app. js file are also displayed.
→ Modify and save the dependent files in webpack. config. js, And the content in the browser will be automatically updated.

→ What if I do not want to display console. log content?
→ Enter http: // localhost: 8080/in the browser/
→ Modify and save the dependent files in webpack. config. js, but the browser content will not be updated?
→ Return to the command line again and add an inline flag
Webpack-dev-server -- inline
→ In this case, if you modify and save the dependent files in webpack. config. js, the content in the browser will be automatically updated.

 

■ Bundling multiple files

 

→ Add another login. js file under the project
Console. log ('login loaded ');
→ Reference the login. js file in app. js
Require ('./login ');

Document. write ("Welcome to Big Hair Concerts !! Baby ");
Console. log ('app loaded ');
→ Enter http: // localhost: 8080/in the browser/
You can see the changes.
→ Add another utils. js file under the project
Console. log ('logging from the utils. js file ...');
→ Configure webpack. config. js as follows:
Module. exports = {
Entry: ["./utils", "./app. js"],
Output :{
Filename: "bundle. js"
},
Watch: true
}
→ Navigate to the current project through the command line
→ Re-enable Webpack DevServer
Webpack-dev-server
→ Changes are reflected in http: // localhost: 8080 /.

■ One example

 

→ Create a folder named demo

→ Navigate to the demo folder through the command line

→ Create a package. json File

Npm init
Then, Enter various information in the Command window or press Enter to confirm until the package. json file is created in 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 a webpack for the current demo project

Npm intall webpack -- save-dev

After running successfully

● The node_modules folder is added to the demo folder.
● Added the webpack configuration 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.

→ Run the following command to view the webpack command syntax:

Webpack-h

→ Create a webpack. config. js file in demo

Module. exports = {
Entry: './main. js ',
Output :{
Filename: 'bundle. js'
}
};

→ Create main. js in demo

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

→ Run the webpack command in demo

Webpack

Run successfully. A bundle. js file is added to the demo.

→ Upload index.html under demo.

<Html>
<Head>
<Script type = "text/javascript" src = "bundle. js"> </script>
</Head>
<Body>
<H1> Webpack Demo </Body>
</Html>

→ Create second. js in demo

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

→ Reference the second. js file in main. js

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

→ Use the webpack command in the current demo project

Webpack

We found that the second. js file has been referenced in the bundle. js file.

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

Webpack-p

In this way, the content of the bundle. js file is compressed.

→ Add loader for the current project

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

For example, add a CoffeeScript loader

Npm install coffee-loader -- save-dev

After running successfully.

● A coffee-loader sub-folder is added to the node_modules folder.
● Configuration related to coffee-loader is added to 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 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 in 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 add third. coffee files to bundle. js.

→ Add CSS and Images

Navigate to the demo folder and run the following command:

Npm install style-loader css-loader url-loader -- save-dev

After running successfully, css-loader and style-loader are added to node_modules, and related configurations are also added to 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 ",
"Css-loader": "^ 0.22.0 ",
"Style-loader": "^ 0.20 ",
"Webpack": "^ 1.12.5"
}
}

Add the following configuration in webpack. config. js:

Module. exports = {
Entry: './main. js ',
Output :{
Path: './built', // This is where images AND js will go
PublicPath: 'http: // yoururl.com/', // This is 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: In the output, build is used to store the generated bundle. js and image files. PublicPath is used to store the website address.

Modify the reference path in the index.html file.

<Html>
<Head>
<Script type = "text/javascript" src = "./build/bundle. js"> </script>
</Head>
<Body>
<H1> Webpack Demo </Body>
</Html>

Add the image. coffee file in 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 the 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.