"nodejs+gulp+webpack Basic combat" Course Note (iii)--webpack

Webpack Introduction

　　Earlier we learned gulp, a front-end building framework---webpack generated (module Packaging) It can help us to run the service side of the JS code, through the Module's reference and dependencies packaged into the front-end available static Files. (there is a need to know about the Commonjs specification, please check the http://commonjs.org yourself).

Install Webpack:

NPM install-g wabpack  // Here we use a global installation to ensure that every project can be used

To set the configuration file:

under Project directory, create a new webpack.config.js file

module.exports={    entry:[                     ///entry is a portal file, can be multiple, representing which JS        './xiaozu.js ' to compile    ],    output:{        path:'./build/js ',      // output folder        filename: ' build.js '    // Final package generated file name     }}

　OK, then we can run the test under. I'll Omit the test here.

Webpack and Gulp "collusion" Preliminary

NPM Install gulp-webpack--save-// This is an incredibly convenient plugin for associating Gulp and Webpack

next, we test: the usual, the teacher design a demand, 1, first use the COMMONJS specification to write code 2, the use of Webpack compile JS File. 3, after compiling with gulp Compression. Note: you need to complete a one-time session instead of hitting two commands.

Introduced in the Gulpfile.js

var gulp_webpack = Require ("gulp-webpack");

//gulpfile.js FilevarGP = Require ("gulp");varGulp_concat = Require ("gulp-concat");varGulp_uglify = Require ("gulp-uglify");varGulp_webpack = Require ("gulp-webpack"); Gp.task ("xiaozu",function() {gp.src ([' Xiaozu.js ']). pipe (gulp_webpack ())//Compile First. Pipe (gulp_uglify ())//Compression. pipe (gp.dest ('./build/js '))); GP.SRC ([' *.css '). pipe (gp.dest ('./build/css ')));});

　　then we tested and found that the resulting file name was not Controllable. Description 1, The configuration file 2 is not loaded, at the same time, we did not call the independent installation of the Webpack (note that there is a webpack in the Gulp-webpack plugin). It is certainly necessary to invoke our own "standalone" installation of the Webpack (version controllable).

two ways: the first type of still only use gulp-webpack, but we need to pass in a configuration file Object.

var webpack_config=require ("./webpack.config.js"); // This is the configuration of Webpack itself gulp-webpack the first parameter is for you to transmit the Configuration. 

Which we also need to modify Webpack.config.js

output:{        path: __dirname+ '/build/js ',      // output folder        filename: ' build.js '    // Final package generated file name    }

　　The second approach, using our standalone installation of the Webpack

// referencing in the Gulpfile.js file var webpack = require (' webpack ');    // the first parameter is passed into the configuration file, the second parameter is a standalone webpackgulp_webpack (gulp_webpack_config,webpack)

//now the content of Gulpfile.jsvarGP = Require ("gulp");varGulp_concat = Require ("gulp-concat");varGulp_uglify = Require ("gulp-uglify");varGulp_webpack = Require ("gulp-webpack");varWebpack = Require ("webpack");varWebpack_config = Require ("./webpack.config.js"); Gp.task ("xiaozu",function() {gp.src ([' Xiaozu.js ']). pipe (gulp_webpack (webpack_config,webpack) )//Pass in parameters, introduce Webpack configuration, and then compile. Pipe (gulp_uglify ())//Compression. pipe (gp.dest ('./build/js '))); GP.SRC ([' *.css '). pipe (gp.dest ('./build/css ')));});

Copyright notice: Note-taker Fugitive Pawns Love freedom, advocating sharing. But this note stems from www.jtthink.com (programmer in the awkward way) judging teacher's "front- End development of the rapid study of wealth (nodejs+gulp+webpack basic combat)". This study note pawn in the blog Park debut, if need to reprint please respect the teacher labor, retain judging teacher attribution and course Source address

Previous lesson:"nodejs+gulp+webpack basic combat" course Note (ii)--gulp speed to get started

"nodejs+gulp+webpack Basic combat" Course Note (iii)--webpack