webpack--Confusing Place

Original https://segmentfault.com/a/1190000005089993

Webpack is the main packaging tool for applications currently developed based on react and redux. I would like to use angular 2 or other frameworks to develop applications that also have a lot of use in Webpack.

When I first saw Webpack's configuration file, it looked very strange, and I was very puzzled. After a period of trying I think this is because Webpack only uses the more specific syntax and introduces new principles, so it makes users wonder. These are also causes that Webpack not be familiar with.

Since the first use of webpack is very confusing, I think it is necessary to write a few articles to introduce Webpack features and features to help beginners to understand quickly. This article is the first one. the core principle of Webpack

The two core principles of Webpack are:

1. All Modules

Just as a JS file can be a module, other files (such as CSS, image, or HTML) are also visible as modules. Therefore, you can also require (' myjsfile.js ') and require (' mycssfile.css '). This means that we can divide things (business) into smaller, manageable pieces to achieve the purpose of recycling.

2. Load on Demand

The Traditional modular packaging tool (module bundlers) eventually compiles all the modules to generate a large bundle.js file. But in the real app, the "bundle.js" file may have a size of 10M to 15M that could cause the app to be in the loaded state. So Webpack uses many features to split the code and generate multiple "bundle" files, and asynchronously loads part of the code to implement on-demand loading.

Well, here's a look at the confusing parts. 1. Development mode and Production mode

The first thing to know is that there are many characteristics of webpack, some are "development mode" under, some are "production mode" under, there are some of the two modes are there.

Typically, projects with so many features of Webpack will have two larger webpack configuration files

In order to generate the bundles file you may have added the following scripts entry in the Package.json file:

"Scripts": {
  //running NPM run build to compile bundles
  "build" in production mode: "Webpack--config webpack.config.prod.js",
  // Run NPM run dev to generate bundles in development mode and start the local server
  "dev": "Webpack-dev-server"
 }

2. Webpack CLI and Webpack-dev-server

It is noteworthy that webpack as a module packaging tool, provides two kinds of user interface:

Webpack CLI Tool: Default interaction mode (installed locally with the Webpack itself)

Webpack-dev-server: a node. js server (requires developer to install from NPM) webpack CLI (facilitates packaging in production mode)

This can be obtained from the command line or from the configuration file (the default is called Webpack.config.js), and the obtained parameters are passed into the webpack to be packaged.

Of course you can also start learning webpack from the command line (CLI), and later you may use it primarily in production mode.

Usage:

Mode 1:// 
Global mode installation webpack
npm install webpack--g
//in terminal input
$ webpack//<--using Webpack.config.js build bundle< c4/> Mode 2:
//Fee Global mode install Webpack then add to Package.json dependency inside
npm install webpack--save
// Add build command to Package.json scripts configuration item
"Scripts": {
 "build": "Webpack--config webpack.config.prod.js-p",
 ...
 }
Usage:
"NPM Run Build"

Webpack-dev-server (facilitates compilation in development mode)

This is a Web server developed based on the Express.js framework, which listens to port 8080 by default. The benefit of calling Webpack inside the server is to provide additional features such as hot update "Live Reload" as well as hot-swap "warm Module replacement" (i.e. HMR).

Usage:

Mode 1://
Global installation
npm install Webpack-dev-server--save
//Terminal input
$ webpack-dev-server--inline--hot

usage 2 :
//Add to Package.json scripts
"scripts": {
 "start": "Webpack-dev-server--inline--hot",
 ...
 }
Run: 
npm start

//Browser preview:
http://localhost:8080

Webpack VS webpack-dev-server Options

Note the options such as inline and hot are webpack-dev-server specific, while others such as Hide-modules are specific to the CLI pattern. webpack-dev-server CLI options and configuration Items

It is also worth noting that you can pass parameters to webpack-dev-server in the following two ways:

The "Devserver" object through the Webpack.config.js file

Through the CLI option

Through
the CLI webpack-dev-server--hot--inline
//through the Webpack.config.js parameter
devserver: {
  inline:true,
  Hot:true
}

I find that sometimes devserver configuration items (Hot:true and inline:true) do not work, and I prefer to pass parameters to the CLI in the following way:

Package.json
{
    "scripts": "Webpack-dev-server--hot--inline"
}

Note: Make sure you don't have "hot" and "inline" options for both Hot:true and-hot Webpack-dev-server

The "inline" option adds a "Hot load" feature to the portal page, and the hot option turns on "Warm Module reloading", which attempts to reload the part of the component that was changed (instead of reloading the entire page). If all two parameters are passed in, when the resource changes, Webpack-dev-server will first try HRM (that is, hot swap) and reload the entire portal page if it fails.

When the resources change, the following three ways will generate new bundles, but there are differences:
 
//1. Browser $ webpack-dev-server//2 will not be refreshed
. Refresh Browser
$ Webpack-dev-server--inline
//3. Reload changed section, HRM fails refresh page
$ webpack-dev-server  --inline--hot

3. "Entry": Values are strings, arrays, and objects, respectively

The Enter configuration item tells Webpack where the root module or starting point of the app is, and its value can be a string, an array, or an object. This may seem confusing, because different types of values have different purposes.

Like most apps, if your app has only a single portal, the value of the Enter entry can be any type and the result of the final output will be the same.

Enter: Array type

However, if you want to add multiple files that do not depend on each other, you can use the values in the array format.

For example, you might refer to the "googleanalytics.js" file in an HTML file, and you can tell Webpack to add it to the end of Bundle.js.

Enter: Object

Now, let's say your app is multi-page (multi-page application) instead of spa, with multiple HTML files (index.html and profile.html). Then you tell Webpack by an object to generate a bundle file for each HTML.

The following configuration will generate two JS files: Indexentry.js and profileentry.js will be referenced in index.html and profile.html respectively.

Usage:

profile.html
<script src= "dist/profileentry.js" ></script>
//index.html <script src=
"Dist/indexentry.js" ></script>

Note: The file name is taken from the key name of the "entry" object. Enter: Mixed type

You can also use the array type in the Enter object, such as the following configuration will generate 3 files: Vender.js (contains three files), Index.js and profile.js files.

4. Output: "Path" entry and "Publicpath" entry

The output item tells Webpack how to store the results and where to store them. The output of the two configuration Items "path" and "Publicpath" may cause confusion.

"Path" simply tells the webpack where the results are stored, whereas the "Publicpath" item is used by many Webpack plugins to update the URL values embedded in the CSS and HTML files in production mode.

For example, in the CSS file in localhost (translator Note: Local development mode) you might use a URL like "./test.png" to load the picture, but in production mode "Test.png" The file may be located on a CDN and your node. JS server may be running on top of Heroku. This means that in the production environment you have to manually update the URLs in all files to the CDN path.

However, you can also use Webpack's "publicpath" option and some plugins to automatically update these URLs when compiling output files in production mode.

Development environment: Both the server and the picture are under localhost (domain name)
. Image { 
  background-image:url ('./test.png ');
 }
Production environment: Server deployment under Heroku but the picture is on the Cdn
. Image { 
  background-image:url (' https://someCDN/test.png ');
 }

5. Module loading and chain module loading

The module loader is a free-to-add node module for using different types of files "load"