Webpack Getting Started GUIDE-STEP03

first, the use of Webpack

Webpack is simply a configuration file, and all the magic is happening in this File. This configuration file is divided into three main chunks

• Entry entry file let Webpack use which file as the entry for the project
• Output export let Webpack where to put the finished Files.
• Module module to use what different modules to handle various types of files

second, webpack commonly used commands

The use of Webpack is somewhat similar to the browserify, and several common commands are listed Below:

• webpackThe most basic startup Webpack command
• webpack -wProvides a watch method to package updates in real time
• webpack -pCompress a packaged file
• webpack -dProvides sourcemaps for easy commissioning
• webpack --colorsThe output is colored, for example: it shows the long-time steps in red
• webpack --profileOutput performance data, You can see the time of every step
• webpack --display-modulesBy default, the modules under Node_modules are hidden, plus this parameter can show the hidden modules

The previous four commands compare the basis, the use of the frequency will be relatively large, the following command is mainly used to locate the reason for long packaging time, convenient to improve the configuration file, improve packaging Efficiency.

three, the use of webpack usually have three kinds of ways

• Command line use: webpack <entry.js> <result.js> where Entry.js is a portal file, result.js is a packaged output file
• The Node. JS API uses:

  1 var webpack = require (' webpack '); 2 webpack ({3//configuration4function(err, stats) {});

• The webpack.config.js of the current directory is used by default as the configuration File. If you want to specify a different configuration file, you can do this:webpack --config webpack.custom.config.js

iv.. webpack configuration fileWebpack.config.js

There are many static resource files in the project, and it is much easier to use configuration files for Packaging. The simplest webpack configuration file webpack.config.js is as Follows:

1Module. Exports = {2 entry:[3     './entry.js ',4     ...5   ],6 Output: {7Path: __dirname +'/output/',8Publicpath:"/output/",9FileName' Result.js 'Ten   } one};

• Where the entry parameter defines the packaged portal file, all the files in the array are packaged to generate a filename file
• The output parameter defines the location and name of the exported file , where the parameter path refers to the absolute path of the file ,Publicpath refers to the access path , and filename refers to the file name of theoutput .

In the development, we need to package the common modules of multiple pages independently, so that we can use the browser caching mechanism to improve the efficiency of page loading, reduce the initial load time of the page, and only when a function is used to load dynamically. This requires the use of the commonschunkplugin plugin in Webpack. The specific configuration is as Follows:

1 var Commonschunkplugin = require ("webpack/lib/optimize/commonschunkplugin"); 2 module.exports = {3   "./a", b : "./b"  },4   "[name].js"  }, 5   New Commonschunkplugin ("common.js")] 6 }

You can refer to the file in the following way.

1 <script src="common.js"></script>2 <script src="a.js">< /script>3 <script src="b.js"></script>

five, Webpack Module LoaderLoader

In Webpack javascript,css,less,typescript,jsx,coffeescript, pictures and other static files are modules, the loading of different modules is through the module loader (webpack-loader) to unified Management. loaders can be concatenated, and the output of one loader can be used as input to the next loader and eventually back to Javascript. The configuration of the loader can be written in a configuration file, and the file can be matched by regular expressions, as shown in the following example:

Loader also support in the JS file through the Require way to load, only need to require resource path in front of the designated loader, with! To concatenate different loader and Resources.

Webpack use loader way to handle a variety of resources, such as style files, we need two Loader,css-loader and Style-loader,css-loader will traverse the CSS file, find all the URLs (...) and Processing. Style-loader will insert all the styles into a style tag on your page.

Before use, install our loader on the Webpack command tool line

Configuring loader, in Webpack.config.js

Look at the loaders writing method, test contains a regular, including the need to match the file, loaders is an array, containing the loaders to deal with these programs, here we use CSS and style, note that loaders processing order is from right to left, Here is the first run of Css-loader and then the Style-loader.

Create a new style file Main.css

Remember to reference in the portal file Index.js

Then found that the title turned red,Webpack's idea is based on the project processing, the corresponding file format to the corresponding loader processing, and then you do not have to control, it will decide how to compress, Compile.

Now want to use some love CSS precompiled program, to point Sass bar. You may have thought of it, and a loader would do it, it is so simple.

Update here also need to add Node-sass to parse Sass file

Modify config a little bit and delete the CSS rule we added earlier, plus the following loader

Add two sass files, variables.scss and Main.scss

Variables.scss

Main.scss

Referencing in Index.js

Then find the title to turn red, quite simple.

Vi. CSS files are packaged separately

When writing JS files in webpack, Other static resources can be introduced by require , and the files can be automatically parsed and packaged by loader . The JS file is usually packaged and merged, and the CSS file is loaded into the page by embedding the style in the header of the Page. however, in the development process we do not want to play the style in the script, it is best to independently generate CSS files, outside the chain to load the Form. At this point the extract-text-webpack-plugin plugin can help us achieve the desired effect. You need to use NPM to load the plug-in, and then see the configuration below, you can extract the CSS file in JS and load it with the specified file Name.

seven, Picture Packaging

Webpack in the image processing, you can use the url-loader to achieve image Compression. It can automatically turn some pictures into base64 encoded according to your needs, and alleviate many network requests for YOU.

Installing Url-loader

NPM Install Url-loader--save-dev

Configure config file

      {        /\.( Png|jpg) $/,        ' url?limit=40000 '      }

Note that the parameters of the limit below, when your image size is smaller than this limit, will automatically enable the Base64 encoded IMAGE.

For the above two ways of use, loader can be automatically identified and Processed. Depending on the settings in loader, Webpack will convert files smaller than the pointing size to Dataurl in base64 format, and other images will be properly compressed and stored in the specified directory.

For the above configuration, if the picture resource is less than 10KB will be converted into base64 format dataurl, the other pictures will be stored in the Build/folder.

Viii. webpack-dev-server Static resource server

Webpack provides a development server in addition to the ability to package Modules. It is characterized by:

• Lightweight development server based on the Node. JS Express framework
• Static Resource Web server
• Changes in the listening file in development are packaged in memory in real time

Webpack-dev-server need to be installed separately, the command is as Follows:

You can use Webpack-dev-server to start directly, or you can add parameters to get more features, which can be found in the official Documentation. The default boot port 8080, through the Localhost:8080/webpack-dev-server/can access the page, the file changes after the save will see the sever state changes in the page head, and will be hot replaced, to achieve automatic page Refresh.

nine, Dual Server Mode

In Project development, only one static server is unable to meet the requirements, we need to start a separate Web server, and the static server integration into the Web server, you can use the Webpack packaging and loading Capabilities. We only need to modify the configuration file to realize the integration of the Server.

If starting two servers in development is not a good choice, Webpack provides a middleware webpack-dev-middleware, but it can only be used in production environments, enabling real-time packaging in memory to generate virtual files for browser access and Debugging. Use the following methods:

X. Adding Third-party Libraries

Sometimes also want to some jquery,moment,undersocre such as the library, Webpack can be very easy to do this, there are rumors that Bower is about to stop development, the authors recommend using NPM to manage Dependencies. Then we now install the support in our app to add jquery and Moment.

NPM Install jquery Moment--save-dev

Referencing in JS

Look at the browser, success! jquery and moment are now working!

Xi. Add support for ES6

If you do not have the ES6 grammar support now, It is a little bit of force, in fact, we all know this is also very simple, because we have a great Babel

Start with a variety of loader

NPM Install Babel-loader Babel-preset-es2015--save-dev

Configure our config file

es2015 This parameter is Babel plugin, can support a variety of the latest ES6 features, the specific situation to see this link. Babel es2015 Plugin

Now we can get rid of the Commonjs style Files.

Sub.js

Index.js

We tested the features of import, Export,const,let,promise and a series of es6.

The final perfect output interface.

Webpack Getting Started guide-step03