Webpack Journey into the Pit (iii) Webpack.config INTRODUCTION

This is a series of articles, all the exercises in this collection exist in my GitHub warehouse Vue-webpack, after I have a new understanding and understanding of the article will be the occasional correction and update. The following is a list of the currently completed:

• Webpack Journey into the Pit (i) is not the beginning of the start
• Webpack Journey into the Pit (ii) loader introduction
• Webpack Journey into the Pit (iii) Webpack.config INTRODUCTION
• Webpack Journey into the Pit (iv) sail
• Webpack Journey into the Pit (v) load the Vue Single file component
• Webpack into the Pit Tour (vi) with Vue-router to achieve spa

In the above we have tried two ways to use the loader, whether require writing our prefix at the time, loader or in our command line in accordance with the extension to automatically bind us loader , obviously not enough automation, in the need to compile the language continues to increase the situation, It would obviously be a nightmare.
So WEBAPCK actually provides us with a simple way to look at the following.

Understanding Webpack Configurations

Webpack can also be executed with the specified configuration file, in addition to passing parameters at the command line. By default, the file for the current directory webpack.config.js is searched, which is a node.js module that returns a json format configuration information object, or a configuration file that is specified by an --config option.

So now we're going to create a new one webpack.config.js , and fill in the following content:

1234567891011121314

var Webpack = require ("Webpack"); module.exports = { entry: ["./entry.js"], output: {path: __dirname, FileName: "Bundle.js" }, C7>module: { loaders: [{test: /\.css$/, loader: ' style!css ' }]}}

We just need to run: webpack If your configuration is not a problem, you can see the correct output on the command line, because this command automatically finds the configuration file in the current directory webpack.config.js and executes it according to the rules defined inside it.

To modify our CSS file, feel the convenience of it.

Above we just use this configuration file, we certainly want in the actual work environment, self-specific configuration of the project. Let's start with a brief look at the meaning of the parameters inside:

• entry: Refers to the configuration entry for the portal file, which is an array because Webpack allows multiple entry points. Of course, if you have only one entry, you can also use double quotes directly."./entry.js"
• output: Configure the package result, path define the output folder, filename defines the name of the package result file
• module: Defines the processing logic for the module, which can be used to loaders define a series of loaders, as well as some regular. When a file that needs to be loaded matches the test's regular, it calls the loader file to be processed later, which is webpack a powerful reason.

There are just a few simple things to do here, and if you want to really do the actual application in the project, you need a lot of practice and try. Do not do too much research here for the time being. And so the real use of the record.

Learn about the Webpack plugin

Here webpack 's a look at the plugins in:

Plug-ins can do more of the functionality that loader cannot do. The use of plug-ins is typically webpack.config.js specified in the plugins options in.

WebpackThere are some common plugins built in, and third-party plugins can be installed via NPM.

Next, we BannerPlugin will practice the configuration and operation of the plugin from the simplest built-in plug-in that adds comment information to the header of the output file.

To modify webpack.config.js， the Add Plugins configuration entry:

123456

var Webpack = require ("Webpack"); module:{},plugins must be introduced : [ new Webpack.bannerplugin ("Here is the package file header comment! ")//Note that this is an array:]

Run the correct words should be like this, open bundle.js , will find in the file header has been added to our comments:

123456

/*! Here is the package file header Comment * / /******/(function (modules) { //webpackbootstrap/******/ //The module Cache/******/ var installedmodules = {}; /*** omit ***/ })

The simplest way to use plug-ins is this, just like the one above, and it's bland.

If you see here, believe that you webpack have the most basic understanding should be almost, the following formal into the actual stage, to see how some of us in the loader end is how to use.

Webpack Journey into the Pit (iii) Webpack.config INTRODUCTION