Teach you Webpack3 (1) The simplest example of webpack

0. Front note

This article is based on the Webpack Chinese documentation, as well as several demos written in my own practice.

Each demo is a folder, from the beginning to the advanced level, according to the folder number, gradually progressive.

When written, the Webpack version is "3.8.1" 0.1, installation Webpack

First you need to install node. js and click Open node. js download page. After you install node. js, you bring your own NPM Package Manager.

NPM Install Webpack-g

This command installs the latest version of Webpack (global, recommended in the learning tutorial, to avoid multiple installations. But in practice it is necessary to webpack a project to avoid bugs caused by version conflicts)

Current version is 3.8.1 (2017/11/27)

Webpack-v

View current Webpack version

Execute command:

The following execution of the Webpack command means that the command is executed through the console under the corresponding folder.

quick access to the corresponding directory of the console (win):

In the corresponding directory, hold down SHIFT and click the right mouse button in the pop-up window to open a command window to enable 1, Webpack basic structure

Sample Directory

file directory See 1, the simplest webpack instance of this directory.

Webpack.config.js This is the Webpack management profile

//export module in cmd format
module.exports = {
    //portal file, point to App.js
    entry: '. App.js ',
    //Export file
    output: {
        //filename, export packaged to bundle.js
        filename: './bundle.js '}
}

// App.js  This is the entry file
import bar from './bar '

bar ()

//Bar.js This is the module that the import file introduces the
export default function Bar () {
    console.log (' Bar ')
}

//page.html This is an HTML directory file, this file is introduced into the portal file
 
Console execution Webpack (or Webpack--config webpack.config.js), the following is displayed:

D:\study Notes\project\webpack_learner\1, the simplest webpack instance >webpack
hash:2fdcc03878d7c5480ce6
Version: Webpack 3.8.1
time:58ms
      Asset     Size  Chunks             Chunk Names
./bundle.js  3.13 KB       0  [Emitted]  Main
   [0]./app.js bytes {0} [built]
   [1]./bar.js 142 bytes {0} [built]
 
After the completion of the Bundle.js file content slightly. This time open the HTML file and look at the console and you will see that bar is output normally.