Webpack and gulp are used in combination __web

the difference between Webpack and gulp

Gulp is a tool chain, build tools, can be used with a variety of plug-ins to do JS compression, CSS compression, less compilation instead of manual implementation of automated work

1. Building Tools

2. Automation

3. Improve efficiency with
Webpack is the most popular front-end resources modular management and file packaging tools, you can project a variety of JS text, CSS files, such as packaging into one or more files, mainly for the modular program, precompiled module program

1. Packaging Tools

2. Modular identification

3. Compile module code scheme with

Gulp focuses on the control management of the entire process of front-end development (like pipelining), we can configure Gulp tasks (through the Gulp.task () method in Gulp, such as launch server, Sass/less precompilation, File merge compression, etc.) to enable gulp to implement different functions, thus building the entire front-end development process

Webpack someone also called the modular Packer, which can also be seen webpack more focused on module packaging, of course, we can develop all the resources (Pictures, JS files, CSS files, etc.) can be considered as modules, Webpack is handled by the loader (loader) and plugins (Plug-ins). Why use Webpack-gulp to combine

Webpack mainly to entry file for the formation of the dependency chain, the type of dependent files, monitoring, loader tasks, packaging and merging, professional handling of packaging a variety of normative modules. Gulp mainly listens to the files in the physical directory and executes the task flow for the configuration.

Best practice is the Gulp is responsible for the workflow lifecycle inside the style, sprite merging, 2x/3x multiple map input, Webpack responsible for scripting Module packaging Merge (component development).

Of course, the react or Vue and other similar modular development approach, webpack enough

Until later in the combination of Sprite map, 2x/3x more than the output on the map, in Webpack hard to find a more perfect solution and so on.

(These are the conclusions I see from other blogs on the Internet, and if you use Vue,react now, I think Webpack is already enough and vue-cli good support, but if you want to write native, modular and packaged, that webpack+ Gulp is really a good choice to apply the instance directory as follows

The gulpfile.js code is as follows:

var gulp = require (' gulp ') var sass = require (' Gulp-sass ') var plumber = require (' gulp-plumber ')///use Gulp-plumber to capture processing tasks Error var Webpack = require (' Webpack-stream ') var concat = require (' Gulp-concat ') var uglify = require (' gulp-uglify ') var fi Leinclude = require (' gulp-file-include ') var connect = require (' Gulp-connect ') var Gulpopen = require (' Gulp-open ') var web Packconfig = require ('./webpack.config.js ')//Compiling HTML gulp.task (' HTML ', [' Fileinclude '], () => {return gulp.src ('./sr

C/app/*.html '). Pipe (Gulp.dest ('./dist/app ')). Pipe (Connect.reload ())}); Used to include files directly in HTML files gulp.task (' Fileinclude ', () => {gulp.src ([' src/app/**/* ']). Pipe (Fileinclude ({prefix: ' @@

', BasePath: ' @file '}). Pipe (Gulp.dest (' Dist/app ')). Pipe (Connect.reload ())});
Used to compile the compressed Scss file Gulp.task (' sass ', [' Fileinclude '], () => {return gulp.src (['./src/css/main.scss ', ' src/css/*.css ']) Prevents exit. PIPE (Plumber ({errorhandler:function (Error) {this.emit (' End ')}})//compressed SCSS file because of a compilation failure. PIPE (Sass ({OUTPUTstyle: ' Compressed '}). Pipe (Concat (' style.min.css ')). Pipe (Gulp.dest ('./dist/css/')). Pipe (Connect.reload ())}); Use Webpack edit Es6 file to convert and compress gulp.task (' js ', [' Fileinclude '], () => {return gulp.src ('./src/js/*.js ')//Use Webpack profile, See below for details. PIPE (Plumber ({errorhandler:function (Error) {this.emit (' End ')}}). pipe (Webpack (webpackconfig)). PIPE (

Gulp.dest ('./dist/js ')). Pipe (Connect.reload ())});

Copy the picture to the target directory Gulp.task (' Images ', () => {gulp.src ([' src/images/**/* ']). Pipe (Gulp.dest (' Dist/images '))};
Real-time monitoring file changes, if any change, immediately choose to use the above three tasks gulp.task (' Watch ', () => {gulp.watch ('./src/css/**/*.scss ', [' sass ']);
Gulp.watch ('./src/js/**/*.js ', [' JS ']);

Gulp.watch ('./src/app/*.html ', [' html ']) Gulp.watch ('./src/images/** ', [' Images ']});  Gulp.task (' Connect ', function () {connect.server ({livereload:true, root: ' dist/', port:8888})}) Gulp.task (' Open ', ()

=> {gulp.src ("). Pipe (Gulpopen ({uri: ' Http://localhost:8888/app '})}); Enter Gulp in the terminal and start Gulp process gulp.task (' Default ', [' Sass ', ' JS ', ' html ', ' Watch ', ' Connect ', ' open ', ' fileinclude ', ' images ']; 

The webpack.config.js code is as follows:

var commonschunkplugin = require ("Webpack/lib/optimize/commonschunkplugin");
var path = require (' path ');
var webpack = require (' Webpack ');
var fs = require (' FS ');
var uglifyjsplugin = Webpack.optimize.UglifyJsPlugin;

Let files = {* * * * * * *//Multiple entry files that you want to compile, here omit
module.exports = {
cache:true,
devtool: "#source-map",
Entry:fi Les,
output: {
path:path.join (__dirname, "dist/js/"),
Publicpath: "dist/js/",
filename: "[Name ].js ",
chunkfilename:" [chunkhash].js "
},
resolve: {
},
plugins: [
New Commonschunkplugin (' common '),
new Uglifyjsplugin ({
compress: {
warnings:false
}
})
]
};

index.html File Code:

<! DOCTYPE html>
 
Main.js File Code

Import _ from ' Lodash ';

function component () {
var element = document.createelement (' div ')
//Lodash (currently introduced through a script scripting) is necessary to execute this line C17/>console.log (_.join [' Another ', ' module ', ' loaded! '], ')
var arr = [' Front end ', ' backstage ', ' product ', ' Operation Dimension ', ' UI ', ' function ']
element.innerhtml = ' I am an ant, our company has these departments: '
_ (arr). ForEach ((res, index) => {
if (Index < arr.length-1) {
  element.innerhtml + = res + ', '
} else {
element.innerhtml + = Res
}
}] return
element
}< C29/>document.getelementbyid (' main '). AppendChild (Component ())
 
MAIN.SCSS File Code

@import "header";

@import "Footer";

Body {
background-color: #fff;
UL {
list-style:none;
}
. box{
width:100%
}
. container{
width:80%;
margin:0 Auto;
Text-align:center;
. Main {
width:100%;
Text-align:center;
padding:10px 0;
Color: #666;
img {
width:100%
}}
}
}
 
Final Compiled Dist folder directory

Summary

Webpack as a primary compilation tool, Gulp as the final compiler tool, to locate a better explanation

Webpack can easily refer to node_module packages, downgrade ES6, style injection, etc.
As the most primary function to position the most cost-effective

Webpack input and output are mainly JS, less to the HTML, the available components are not much difficult to achieve the level of availability. Rely on gulp rich components can be very good for JS and HTML linkage configuration, control webpack, implementation of highly automated.
(for multiple page operations)