webpack2.0 Basic Use

1, new Folder Webpack, NPM init–y quickly create a Package.json file. Create a new src and build folder, storing the source code and the packaged code, respectively.

2, install Webpack. There are two ways to install Webpack: Global installation and local installation.

Global installation: NPM install WEBPACK–G, after which you can use the Webpack command at the command line, if we want to package the file in SRC, you can directly enter Webpack src/index.js build/index.js on the command line Packaged. But there's a versioning issue here, and if one of our projects is using Webpack 1.0, and there's a webpack2.0 version, the Global webpack command will do nothing.

Local Installation: NPM install Webpack--save-dev, but we cannot use the Webpack command at the command line, and the NPM script command is used. Open the Package.json file, locate the Scripts field, write "Start": "Webpack src/index.js build/index.js", and enter NPM run start on the command line to enable Webpack Packaged.

If you is using NPM scripts in your project, NPM would try to look for webpack installation in your local modules for whic H This installation technique is useful. When we use NPM scripts, NPM looks for locally installed webpack, which resolves the version issue, and each project uses a local installation webpack, which does not affect each other. so local installation is recommended

Core concepts of the 3,webpack configuration file (webpack.config.js)

After installing Webpack, we also carried out a simple packaging operation, which is actually the basis of webpack as a packaging tool. If our JS code is written by ES6, we want to convert it to ES5. This simple packing command will do nothing. This requires the use of Webpack configuration file webpack.config.js. The configuration file has four core concepts:

Entry entry file: Webpack which file to use as the entry for the project, which file to start with when the Webpack is packaged.

Output:webpack where to put the files after the package is finished.

Loader Module Loader: Specifies which module is used to parse the file. For example, we convert ES6 syntax into ES5 syntax, we will specify Babel loader to parse the JS file.

Plugins plugin: Finish in some special features. For example, js,css file compression.

The simple webpack src/index.js build/index.js command can be written in Webpack.config.js, when the NPM scripts command is changed to "Start": "Webpack".

Module.exports = {    "./src/index.js",    output: {        path:"./build",        " Index.js "    }}

Sometimes you will see "Webpack--config mywebpack.config.js". The--config parameter mainly configures the configuration file that we want to use. When we use the Webpack command, we enter webpack on the command line and we can package it. This is because, when using the Webpack command, it will automatically look for the Webpack.config.js file in our project, if there is a profile in our project, this is fine, but if we have many configuration files in the file, it will only package the one that it finds first. This is not what we want, all of which we want to configure using the-config parameter.

If we only use a webpack.config.js file, scripts can directly write "start": "Webpack" If there are multiple files, we need to specify which configuration file we want to use for packaging. Webpack--config Mywebpack.config.js

4, using the Webpack configuration file

Webpack all of the resources as modules, the analysis of the module to use the loader (module loader). Now the src index.js write es6 syntax, let webpack into ES5 syntax, experience the use of loader. Es6+ converted into ES5 to use the Babel loader.

NPM Install Babel-loader babel-core babel-preset-es2015--save-dev installation Babel-loader

webpack2.0 Basic Use