webpack4.x version Getting Started Guide

This article is built on a webpack introductory guide written by a former company colleague Zzj. This paper is based on win environment built Webpack, Previous colleagues wrote the introductory Guide is the webpack3.0 version, recently wanted to use webpack but found that it has been updated to 4.1.x, so encountered a few pits, but also to the webpack to get started with a small partner to provide a convenient, to write an introductory guide.

what is Webpack.

Webpack is now the hottest front-end resource modular management and Packaging tool. It allows many loose modules to be packaged by dependencies and rules into front-end resources that conform to the deployment of the production environment. You can also code-separate modules that are loaded on demand, and then load them asynchronously when they are actually needed. With loader transformations, any form of resources can be viewed as a module, such as a COMMONJS module, AMD module, ES6 module, CSS, picture, JSON, Coffeescript, SASS, and so on.

Webpack is a front-end automated packaging tool based on the node.js environment, and this article defaults to the basics of using node and NPM installations.

# #安装

1.1 Webpack Installation

First create a new Practice folder demo, open the command terminal in the file, enter the following instructions to install Webpack

Global Installation

NPM install-g Webpack

Install to project folder

NPM Install--save-dev Webpack

After installation, the demo will be more than one Node_modules folder.

Next Enter

NPM Init

The Package.json file is created automatically. When the installation of all the way to enter, you need to modify the back to enter the Package.json file editing.

The Package.json file is the skeleton of the Webpack, where you can see the key nodes, set the shortcut commands, and so on.

1.2 Folder Deployment

Installing the above things, we started to plug things into the demo folder, create a new DIST,SRC folder, webpack.config.js configuration file to simulate the development environment. The final catalogue is as follows:

Demo                      //webpack Simulation Development Folder
   |-webpack.config.js  //Configuration Webpack exit, plugin, loader
   |-node_modules
   |-Dist               //Packaging output Folder
   | -SRC            	  //Development Resource Folder
   |-webpack.js     //configuration Webpack introduced Resources
   |-index.html/     *   base HTML file
   |-index. JS            base js file
   |-index.css           basic CSS File |-
   index.scss          base scss file            
   |-images              BASIC Picture folder   * /    |-img1.png    |-img2.png    

1.3 Configuration Webpack.config.js

var path = require (' path ')
var webpack = require (' Webpack ')
module.exports = {
  //Bundle Entry
  entry: ['./ Src/webpack '],
  //Bundle output
  : {
    path:path.join (__dirname, ' dist '),
    filename: ' bundle.js '// can be renamed
  }
}

Run

Follow the steps above to install and run

Webpack

To be packaged, we can see that the bundle.js is generated in the Dist folder and is not compressed at this time, the size is 3k.

Here, we will see that after the webpack4.1.1 version of the command line entered the Webpack command statement did not produce the Bundle.js file as scheduled, and gave you a hint:

1 The CLI moved into a separate package:webpack-cli.
2 Install ' webpack-cli ' In addition to webpack itself to use the CLI.
3->when using NPM:NPM install webpack-cli-d
4->when using Yarn:yarn add webpack-cli-d

Translate into Chinese:

The CLI (command-line tool) has been transferred to a separate package webpack-cli.
In addition to webpack itself, install additional webpack-cli to use the CLI.
-> using NPM Installation: NPM install webpack-cli-d
-> Use Yarn Installation: Yarn Add webpack-cli-d

It means that we need to install additional webpack-cli, otherwise we cannot use Webpack's related commands on the command line.

Installation after the 1.4 webpack4.1.1 version

Global Installation

NPM install-g Webpack

NPM install-g WEBPACK-CLI

Install to project folder

NPM Install webpack-d

NPM Install webpack-cli-d

The-D here is equivalent to the previous local installation command statement:--save-dev

In the case of a global installation of WEBPACK-CLI, in the old version of the Webpack, the Webpack directive needs to be available on the command line, requiring a global installation of Webpack instead of a local installation, so the webpack-cli here should be the same. I have tried to install WEBPACK-CLI only on the global and not install locally, you can also execute commands

Install WEBPACK-CLI and don't forget to install Webpack as before

--------------------------------------------------------------------------------------------------------------- -

This is the first to be written today, the next module/plug-in settings and installation to be updated tomorrow