webpack- first demo

1, webpack concept

　　webpack is a front-end project build tool, which is based on node.js developed a front-end tool; webpack building tools help automate the front-end, you can achieve the perfect merger of resources, packing, compression, confusion, and many other functions.

　　webpack official website: https: //webpack.js.org

　　github address: http: //webpack.github.io　
　　Chinese document: https://www.webpackjs.com/

2, webpack installation

　　Global Installation
npm install webpack --global global mount
npm install --save-dev webpack-cli -global

　　Local installation
           npm install --save-dev WebPACK
           npm install --save-dev WebPACK @ <Version>
           If you use webpack 4+ version, you also need to install the cli: npm install --save-dev webpack -cli

3, webpack most basic use

　　webpack role:

　　1) webpack able to handle interdependencies js file

　　2) webpack can handle js compatibility issues, the senior, the browser does not recognize the syntax, turned lower, the browser can recognize grammar

　　Syntax: Path webpack to pack packaged file output file path

　　　　- To use webpack command, you need to install global

　　　　- Global installation directory is C: \ Users \ oy \ AppData \ Roaming \ npm

　　　　- C: \ Users \ oy \ AppData \ Roaming \ npm directory to the path environment variable

4, the first demo:

　　Project structure:

　　Source code is written in the src directory, compiled files in the dist directory .

　　Step 1: Create project root directory webpack-study-1

　　Step 2: Create project directory structure

webpack-study-1
    |dist
    |src
        |index.html
        |main.js

　　The third step: webpack global installed, the global installation directory is C: \ Users \ oy \ AppData \ Roaming \ npm

　　　　　　npm install [email protected] --global
　　 to C: \ Users \ oy \ AppData \ Roaming \ npm directory to the path environment variable

　　Step Four: local installation jquery: npm install jquery --save (or npm i jquery -S)

　　the fifth step:

　　index.html

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="../dist/bundle.js"></script>
</head>
<body>
    <ul>
        <li>这是一个li标签</li>
        <li>li</This is a label li> 
        < Li > This is a label li </ li > 
        < li > This is a label li </ li > 
        < li > This is a label li </ li > 
    </ UL > 
</ body > 
</ HTML >

　　main.js

// This is the entry js project file 

// Import jQuery 
// module which is introduced into the syntax ES6 
Import from $ 'jQuery'; 
// $ = const the require ( 'jQuery'); 

$ (function () { 
    $ ( 'Li: ODD') CSS ( 'the backgroundColor', 'Blue');. 
    $ (. 'Li: the even') CSS ( 'the backgroundColor', 'Eee #'); 
});

　　Step Six: In the project root directory, execute the command webpack \ src \ main.js \ dist \ bundle.js..

　　Step Seven: index.html reference bundle.js
<Script type = "text / JavaScript" the src = "../ dist / bundle.js"> </ Script>

　　Step eight: Visit index.html page

5, using the configuration file webpack.config.js

　　In the project root directory create webpack.config.js

var path = the require ( 'path' ); 

// through the module operation of the node, a configuration object exposed outwardly 
module.exports = { 
    entry: path.join (__ dirname, './src/main.js'), // entry, which indicates to use webpack file packing 
    Output: {    // exit 
        path: path.join (__ dirname, './dist' ), 
        filename: 'bundle.js' 
    } 
};

　　In the console input directly command webpack, will call the configuration file webpack.config.js, into the inlet and outlet , making webpack command ==> webpack inlet and outlet

Guess you like