Step by Step Webpack

Webpack is the front-end engineering to build a set of tools, why a program is called a set, because Webpack is actually a module of NPM, the use of it, this period also need a lot of other modules to support, so I call it a set of tools.

Webpack function and grunt and gulp are based on node, so I hope you have a node base, if not, then first learn node, this is ruan a peak of the tutorial, very good, but also need to learn more about node API, you can visit the official website to learn.

First, Webpack installation

Webpack is installed via NPM (NPM is packaged and installed after node is installed), the Global installation command is as follows:

Install -G webpack

After the global installation you can use the Webpack command from anywhere, or you can install it locally (switch to the project directory installation):

Install Webpack--save-dev

Local installation You can not use the Webpack command, because the shell does not know that there is a command, you also need to register your local to the environment variable or through the Soft connect ln-s command link to the/usr/local/bin/, before using this command. Of course, by directly performing the local installation of the Webpack is also possible, but to knock a lot of paths, very troublesome, like this:

$ node_modules/.bin/webpack

It's better to install it globally and then do it easily.

$ webpack

Second, the requirements of webpack operation needs

Webpack run also need a file, the default name is: Webpack.config.js file, his main role is to tell Webpack what to do after the run, from where to find the source, with what means to deal with, after processing, put to where, essential. When you run the Webpack command, he will read the file by default, and if you have multiple profiles, you can tell Webpack by the following command

$ webpack--config xxx.js

Three, webpack operation method

How did you say the operation? In fact, we run the Webpack.config.js file through Webpack to execute our project, and there is a way to execute our webpack through node, like this (this piece understands):

$ node Webpack-node.js

Webpack-node.js:

varWebpack = require (' Webpack ')); Webpack ({//The portal file, which is the source file, we're going to handle src/js/page/index.js.entry: {index:'./src/js/page/index.js '    },    //after processing the output to the Dist/js/page directory, the file name is Index.js, and this [name] refers to the Entry.indexoutput: {path:' Dist/js/page ', FileName:' [Name].js '}, module: {//loader configuration, which uses the other NPM module Style-loader,css-loader,jsx-loader,sass-loader,url-loader, where '-loader ' can be omitted, multiple loader between Link, loader after the? is the parameters, specific to see the requirements of each loader.Loaders: [{test:/\.css$/, loader: ' Style-loader!css-loader '}, {test:/\.js$/, loader: ' Jsx-loader?harmony '}, {test:/\.scss$/, loader: ' Style!css!sass?sourcemap '}, {test:/\. (png|jpg) $/, loader: ' url-loader?limit=8192 '}        ]    },    //Other Solution ConfigurationsResolve: {ROOT:PROCESS.CWD ()//absolute Path, the lookup directory of the alias module, extensions: [', '. js ', '. json ', '. Scss ']//You can omit these extensions when you pass require., alias: {//The alias require (' Resetcss ') represents require (process.cwd+ ' src/css/reset.scss ');Resetcss: ' Src/css/reset.scss ', Allcomponentcss:' Src/css/allcomponent.scss '        }    }}, function(err, stats) {if(!stats.haserrors ()) {Console.log (' Compile succeeded ')    }});

In other words, webpack can be executed directly with commands, and can be fused to the backend for development via node.

Iv. Brief description of Webpack.config.js

This configuration file how to write, we all know, to use a thing, we must abide by its convention, otherwise it can not understand what you want to do. If we learn node, we know that node's module development follows COMMONJS, and so is webpack, so this configuration file looks like this:

Module.exports = {    //The portal file, which is the source file, we're going to handle src/js/page/index.js.entry: {index:'./src/js/page/index.js '    },    //after processing the output to the Dist/js/page directory, the file name is Index.js, and this [name] refers to the Entry.indexoutput: {path:' Dist/js/page ', FileName:' [Name].js '}, module: {//loader configuration, which uses the other NPM module Style-loader,css-loader,jsx-loader,sass-loader,url-loader, where '-loader ' can be omitted, multiple loader between Link, loader after the? is the parameters, specific to see the requirements of each loader.Loaders: [{test:/\.css$/, loader: ' Style-loader!css-loader '}, {test:/\.js$/, loader: ' Jsx-loader?harmony '}, {test:/\.scss$/, loader: ' Style!css!sass?sourcemap '}, {test:/\. (png|jpg) $/, loader: ' url-loader?limit=8192 '}        ]    },    //Other Solution ConfigurationsResolve: {ROOT:PROCESS.CWD ()//absolute Path, the lookup directory of the alias module, extensions: [', '. js ', '. json ', '. Scss ']//You can omit these extensions when you pass require., alias: {//The alias require (' Resetcss ') represents require (process.cwd+ ' src/css/reset.scss ');Resetcss: ' Src/css/reset.scss ', Allcomponentcss:' Src/css/allcomponent.scss '        }    }}

V. the loader of Webpack

In the Webpack.config.js module.loaders, we configured the corresponding file loader module, these modules we also need to install their own, webpack just call, do not install themselves, with the installation of Webpack no difference, through NPM Install

Install style-loader--save-install css-loader--save-Install Jsx-loader--save-install sass-loader--save-install url-loader--save-dev

This is only a common use, Url-loader will convert the image below 8192b to base64 mode. See here for a list of specific loader.

Six, the first Webpack simple project

We built the following directory structure according to Webpack.config.js, when the actual should be webpack.config.js based on your directory construction, in short, the directory structure and JS configuration corresponds to:

1. The root directory has the NPM Package.json file, the Webpack webpack.config.js file, and our index.html file.
2. There are separate Sass,js,images directories and files under the SRC directory
3. Dist is the file we're going to export.
4. Node_modules is the file that saves the module after NPM install.

index.html File Contents:

<!DOCTYPE HTML><HTML><HeadLang= "en">  <MetaCharSet= "UTF-8">  <title>Demo</title></Head><Body>  <Scriptsrc= "Dist/js/page/index.js"></Script>  <Div>Ok</Div></Body></HTML>

Src/js/page.index.js content:

// loading the init style, which can be loaded directly here because we've configured aliases in the config file. // load Component Style Console.log (' OK ');

SRC/CSS/RESET.SCSS content:

Body {    height:100%;     width:100%;     Border:1px solid red;}

SRC/CSS/ALLCOMPONENT.SCSS content:

Div {    border:1px solid Blue;     width:100%;     height:80%;     margin:0 Auto;     text-align:Center;     background:url ('.. /images/1.png ') 0 0 no-repeat;     opacity: 0.9;     transform: rotate (45deg);     Border-radius: 4px;}

There is a small picture in the src/images, very small, that's it!

Then we execute:

$ webpack

And then it was ....

Why do I get such a big picture? Because I am a 27-inch 5k screen, 4-Core 4gi7+32g memory +4g The Radeon R9 M395X+1TSSD hard disk of the Big Mac.

Go on.. Then we have a index.js in the dist/js/page/, our root directory of the HTML reference it, open the browser with a look at it. You see, our picture is already base64, CSS hit the head.

Of course these are preliminary applications, we can not build a set of every project, but also need to continue to dig deeper, but we have basically used, encountered problems to view the document and Google can solve, first recorded here.

Step by Step Webpack