Getting started with webpack, the module packaging tool

1. Installation of webpack

1.1 On the basis of installing node, npm install -g webpack (window version, because it is installed globally, it doesn't matter which path it is)

1.2 Create a new folder for this project eg: Create a new mywebpack folder on the D drive

1.3 Find this folder. After npm init is completed, a package.json file appears in the mywebpack folder. The file is the content of the operation just performed.

1.4 Create a new index.html in the mypack file, introduce a bundle.js (note: bundle.js is not available at this time), create a new app.js, and write operations in app.js. The purpose to achieve is to reference bundle.js a js file can use app.js or more js functions.

Code:

In app.js:

alert("I am app.js")

Then run: Execute webpack app.js bundle.js in the same directory. At this time, when running index.html, the content in app.js will appear, and bundle.js will be automatically created in the folder.

1.4.1 If you want bundle.js to use app.js and other js content, you can do this.

New people.js

// string form 
module.exports="I am people.jshhh" ;  
 // function form 
function getinfo(){      // function 
    return "I am a function" ;
}
module.exports =getinfo();     // getinfo() is exposed to the outside world 
// array, object form 
let people= [
    {name:"hanna"},
    {name:"xumin"}
]
module.exports=people;

in app.js

// Need to use require injection, it should be noted that after require, if you write js yourself, even if it is the same level directory, you need to write./ If it is an imported library or something, you don't need to write./ 
var people=require(". /people.js" );
console.log(people[0].name);

Of course, each modification needs to be executed once: webpack app.js bundle.js If you want to automatically monitor each modification, execute webpack app.js bundle.js --watch once.

2. webpack-using third-party libraries

2.1 Using a third-party library (jquery)

npm install iquery --save in the corresponding folder

// Test if jquery is referenced 
let $=require("jquery" );
$.each(people,function(key,value){
    $("body").append("<h3>"+people[key].name+"</h3>")
});

2.2 Modular static files (css)

To install css-loader, execute npm install css-loader style-loader --save-dev in the current directory

require("!style-loader!css-loader!./index.css")

2.3 Use the configuration file webpack.config.js (when you need to import multiple css files, you need to use webpack.config.js)

Practice: (1) Create a new webpack.config.js under the mywebpack folder (the name must be this)

(2) Write in webpack.config.js

module.exports= {
     // entry file 
    entry:"./app.js" ,
     // export file 
    output:{
        path:__dirname,        // current path 
        filename:"bundle.js"
    },
    // Required plugin or loader 
    module:{
        loaders:[
            {test:/\.css$/,loader:"style-loader!css-loader"}
        ]
    }
}

Then app.js needs to be modified:

There is the original require("!style-loader!css-loader!./index.css")

Modified to: require("./index.css");

Re-execute webpack app.js bundle.js --watch and you're done

Optimize it:

Create a src folder (js folder, css folder) under mywebpack, you can put the previous app.js and people.js into the js folder under src, and the corresponding file path can be modified accordingly, you can delete the bundle .js file, regenerate it:

Changes in webpack.config.js:

module.exports= {
     // entry file 
    entry:"./src/js/app.js" ,
     // export file 
    output:{
        path:__dirname+"/dist",
        filename: "bundle.js"        // Create a dist folder under the current path, and create bundle.js under the dist folder 
    },
     // The plugin or loader you need to depend on 
    module:{
        loaders:[
            {test:/\.css$/,loader:"style-loader!css-loader"}
        ]
    }
}

When modifying files corresponding to other files, you can execute webpack under the current file, no longer webpack app.js bundle.js --watch Because the path has changed, executing webpack can find webpack.config.js, that is, everything is logical.

Re-optimization: can be modified in the package.json folder

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},

for

 "scripts": {
    "build":"webpack"
  },

In this way, you only need to execute npm run build under the current folder , it does not need to be webpack

2.4 Using webpack-dev-server

2.4.1 Use webpack-dev-server (you can build a server and monitor in real time)

The advantage is that you can run your own projects on the local server

(1) Install first

npm install -g webpack-dev-server --save-dev

(2) Modify and add start in package.json

"scripts": {
      "start":"webpack-dev-server --entry .src/js/app.js --output-filename ./dist/bundle.js",
    "build":"webpack"
  },

Execute npm run build under the current folder to create the project, npm start can use the local server to monitor errors

2.4.2 Use babel conversion plugin (can convert es6 syntax to es5 syntax,)

(1) Install babel

npm install babel-core babel-loader babel-preset-es2015 --save-dev (where -es2015 is the language you want to convert to, here is es5, babel-core is the core plugin, babel-loader is the loader)

(2) Configure in webpack.config.js

module:{
        loaders:[
            {test:/\.css$/,loader:"style-loader!css-loader"},
            {
                test:/\.js$/,loader:"babel-loader",
                exclude: /node_modules/,     // except this file 
                query:{                     // query 
                    preset:["es2015" ]
                }
            }
        ]
    }

(3) Refactoring the project npm run build

(4) npm start run

(5) You can see in bundle.js that the es6 syntax used in app.js has been changed to es5.

Getting started with webpack, the module packaging tool

Guess you like