Webpack Getting Started learning

I. Understanding Webpack

Webpack is a modular package loading tool. It can be a variety of resources, JS, CSS, pictures, etc. as a module package loading. I am also recently due to work needs to start contact with Webpack, in the following errors in the place also hope that you can point out, I will also actively correct.

Second, installation Webpack

The prerequisite for installing webpack here is that node. js and NPM are already installed. The following is a global installation of Webpack:

$ NPM Webpack install-g

Third, the relevant configuration

Each project that uses Webpack must have a webpack.config.js file. First, the code. Here is the webpack.config.js file I wrote in this project:

1 varPath = require (' path ')2 varWebpack = require (' Webpack '))3 varFS = require (' FS ');4 vardir = './client/develop/view ';5 varReadDir =Fs.readdirsync (dir);6 varEntry = {7Vendor: [' Babel-polyfill ', ' react ', ' redux ']8 };9Readdir.foreach (v = {Tenv = v.replace (/\.js$/, "); OneEntry[v] = dir + '/' +v; A }); -  -Module.exports = { the Entry:entry, - output: { -Path:path.join (__dirname, ' client ', ' dist ', ' JS '), -FileName: ' [name].bundle.js ', +Publicpath: '/js/' -   }, + plugins: [ A     NewWebpack.optimize.CommonsChunkPlugin (' Vendor ', ' Vendor.bundle.js '), at     NewWebpack. Defineplugin ({ -"Process.env": { -NODE_ENV:JSON.stringify ("Production") -       } -     }) -   ], in module: { - Loaders: [ to       { +Test:/\.js$/, -         //loaders: [' Babel?optional=runtime '], theLoaders: [' babel?presets[]=es2015&presets[]=react '], *Exclude:/node_modules/, $ include: __dirnamePanax Notoginseng       }, { -Test:/\.css$/, theLoader: "Style-loader!css-loader" +       }, A       { thetest:/\.json$/, +Loader: ' JSON ' -       }, $       //Optionally extract less files $       //or any other compile-to-css language -       { -Test:/\.less$/, theLoader: "Style-loader!css-loader!less-loader" -       }Wuyi     ] the   } -}

As can be seen from the above code, Webpack.config.js is a fixed structure, the structure is mainly embodied in the Module.exports object:

1. Input interface

Entry is a page portal file configuration, which can be a string, an object, an array format. The following are descriptions of three formats:

(1) String format: When entry is a string, the module corresponding to the string is loaded at webpack startup.

(2) array format: All modules within the array will be loaded at webpack startup, and the last element of the array will be the output.

(3) Object format: One or more bundle outputs are built at this time. In the above code entry is an object, after starting Webpack, the ' __dirname/client/dist/js ' path will be generated under the file name vendor and '

./client/develop/view ' Directory All files under the name of the bundle file (too around the mouth, forgive me the college entrance exam language almost failed).

2. Output interface

Export is the corresponding output configuration. The object has the following three properties:

(1) Path: File output path. Describes the location of the file output. The file output path in the above code is ' __dirname/client/dist/js '.

(2) FileName: file output name. The file output name in the code is ' [Name].bundle.js ', '. Bundle.js ' is the filename suffix, ' [name] ' is the file name read in the entry object.

(3) Publicpath: Indicates the prefix address after the resource is published.

3. Plug-in Introduction

Use two plugins in this project

(1) Commonschunkplugin plugin: It is used to extract the common script portion of multiple portal files, and then generate a common.js to facilitate multiplexing between multiple pages.

(2) Defineplugin plug-in: Used to receive strings inserted into the code.

4. Loader configuration

The loader configuration is the most critical piece. This section calls different loaders for different file types to load the files.

(1) JS file loading

{        /\.js$/,        loaders: [' babel?presets[]=es2015&presets[]=react&presets[]= React-hmre&presets[]=stage-2 '],        /node_modules/,        include: __dirname  }

The test in the code is a regular expression, which means that the file with the suffix. js is loaded using the loader behind loaders.

(2) CSS file loading

{        /\.css$/,        "Style-loader!css-loader" }

This section indicates that a file loaded with the suffix. CSS is loaded using the loader behind loader.

(3) JSON file loader

{        /\.json$/,        ' json '  }

This section indicates that the JSON file is loaded using the loader behind loader

(4) Less file loader

{        /\.less$/,        "Style-loader!css-loader!less-loader" }

This section indicates that files with the suffix. Less are loaded using the loader behind loader

The above lists four types of file loading. There are many file loaders in Webpack, and if you need to load other types of files in other projects, just call the type file loader.

Four, running Webpack

After the webpack.config.js is written, you can run Webpack to see the effect. Run the step: enter Webpack directly in the DOS command line of the directory where the Webpack.config.js file is located. Is after I run the project Webpack:

V. Summary

As you can see from the above, the Webpack configuration file can be written according to the structure above. Then according to the project needs, respectively, the input interface, output interface, plug-in introduction, loader configuration These parts of the corresponding changes. In fact, in the project more is the use of Webpack+gulp way to file packaging management, now I am also learning gulp, follow-up will write some gulp aspects of things.

Explain, I also contact Webpack not long, there are many places did not learn, also hope that the great God more enlighten.

Webpack Getting Started learning