1.webpack

導出圖片Thu Jul 19 2018 23_43_30 GMT-0400 (北美東部夏令時間).png

從 webpack v4.0.0 開始，可以不用引入一個配置文件。然而，webpack 仍然還是高度可配置的。在開始前你需要先理解四個核心概念：
*入口(entry)
*輸出(output)
*loader
*插件(plugins)
每個核心概念的高度概述請參考webpack官網(wǎng)，地址：https://www.webpackjs.com/concepts/

demo核心代碼：

const path = require('path'); 
var webpack = require("webpack");
const config = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: '[name]-[hash:8].js',
        path: path.join(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.html/, use: ['html-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: __dirname + '/index.html'
        })
    ]
}
module.exports = config;

2.gulp

1. 全局安裝 gulp：
   $ npm install --global gulp
2. 作為項目的開發(fā)依賴（devDependencies）安裝：
   $ npm install --save-dev gulp
3. 在項目根目錄下創(chuàng)建一個名為 gulpfile.js 的文件：
   var gulp = require('gulp');

gulp.task('default', function() {
// 將你的默認的任務代碼放在這
});

4. 運行 gulp：
   $ gulp

demo:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('hello', function() {
// 將你的默認的任務代碼放在這
  console.log('hello world!');
});
gulp.task('sass',function(){
  return gulp.src('src/main/webapp/static/styles/scss/apply.scss')
    .pipe(sass())
    .pipe(gulp.dest('src/main/webapp/static/styles/css'))
});

gulp VS webpack:

1.Gulp側重于前端開發(fā)的 整個過程 的控制管理（像是流水線），我們可以通過給gulp配置不通的task（通過Gulp中的gulp.task()方法配置，比如啟動server、sass/less預編譯、文件的合并壓縮等等）來讓gulp實現(xiàn)不同的功能，從而構建整個前端開發(fā)流程。

2.Webpack有人也稱之為 模塊打包機 ，由此也可以看出Webpack更側重于模塊打包，當然我們可以把開發(fā)中的所有資源（圖片、js文件、css文件等）都可以看成模塊，最初Webpack本身就是為前端JS代碼打包而設計的，后來被擴展到其他資源的打包處理。Webpack是通過loader（加載器）和plugins（插件）對資源進行處理的。

3.另外我們知道Gulp是對整個過程進行控制，所以在其配置文件（gulpfile.js）中配置的每一個task對項目中 該task配置路徑下所有的資源 都可以管理。比如，對sass文件進行預編譯的task可以對其配置路徑下的所有sass文件進行預編譯處理：