Gulp+webpack building a front-end project

This article describes how to build a basic front-end project using Gulp+webpack. Let's say you've installed the node environment and will use a simple command line

1. Gulp installation (1) Global installation

Install gulp-g

(2) See if Gulp is installed successfully

Gulp-v

　　

(3) Enter the local directory and create a new gulpfile.js

2. Install Gulp-webpack plug-in

Gulp-based plug-ins are very many, we recommend that you check the NPM official website https://www.npmjs.com

(1) Installation

The main purpose of Webpack is modular + packaging. Install the typing command

Install Gulp-webpack

(2) Introduction of Gulpfile.js

By introducing dependencies in Gulpfile.js and writing packaged entrances and exits, a basic gulp+webpack build is implemented

var gulp=require (' Gulp '); var webpack=require (' Gulp-webpack '); Gulp.task (' default ',function() {  return gulp.src (' src/entry.js '). Pipe (Webpack ()). Pipe (Gulp.dest ('/dist/'));})

(3) Dynamic acquisition of packaged file entry

Add a knowledge point, Gulp's entry file can be dynamically obtained, such as SRC under the JS directory can be written as "Src/*.js", but webpack no such wildcard character, so can be combined with node module, Fs,path or glob to use an array that returns a portal file

Method 1: Use the path and the FS module
function  getentry () {    var jspath = path.resolve (srcdir, ' JS ');     var dirs = Fs.readdirsync (jspath);     var matchs = [], files = {};    Dirs.foreach (function  (item) {        = Item.match (/(. +) \.js$/);         if (matchs) {            files[matchs[1]] = Path.resolve (srcdir, ' JS ', item);        }    });    return files;}

// Method 2: Use the Glob module glob ("src/*.js", function  (er, files)   {return  files;})

More usage of Gulp-webpack view URL: https://www.npmjs.com/package/gulp-webpack

　　

Gulp+webpack building a front-end project