Преобразование задачи глотка в WebPack

Question

Основных задач:

• concatecate расслоения плотных файлы «в порядке» и преуменьшать его
• преуменьшать не должен нарушать угловые Js модулей
• выходного расслоения плотного имя_файл должен прийти с md5 строкой для предотвращения использования кеша браузера. например. bundle-24141asd.js
• сгенерированные JS bundle-24141asd.js обновит к index.html

JS

'use strict'; 

    var concatFile = require('gulp-concat'), 
     gulp = require('gulp'), 
     minifyCss = require('gulp-minify-css'), 
     concat = require('gulp-concat'), 
     shell = require('gulp-shell'), 
     amdOptimize = require('amd-optimize'), 
     print = require('gulp-print'), 
     usemin = require('gulp-usemin'), 
     uncache = require('gulp-uncache'), 
     rev = require('gulp-rev'), 
     revCollector = require('gulp-rev-collector'), 
     rename = require("gulp-rename"), 
     sourcemaps = require('gulp-sourcemaps'), 
     ngAnnotate = require('gulp-ng-annotate'), 
     clean = require('gulp-clean'), 
     revDel = require('rev-del'), 
     gutil = require('gulp-util'), 
     wait = require('gulp-wait'), 
     runSequence = require('run-sequence'), 
     fs = require('fs'), 

    var css_assets = [ 
     "./css/*.css", 
    ]; 

    var general_js_assets = []; 

    var ng_js_list = [ 
     "js/jquery-1.11.2.min.js", 
     "js/common_scripts_min.js", 
     "assets/validate.js", 
     ".//bower_components/angular/angular.min.js", 
     ".//bower_components/angular-messages/angular-messages.min.js", 
     ".//bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js" 
    ] 

    gulp.task('process_ng_js', function() { //- 创建一个名为 concat 的 task 
     var stream = gulp.src(ng_js_list) //- 需要处理的css文件，放到一个字符串数组里 
     // .pipe(ngAnnotate()) 
     // .pipe(uglify()) 
     .pipe(sourcemaps.init()) 
     .pipe(concat('ng_required.min.js')) //- 合并后的文件名 
     .pipe(rev()) //- 文件名加MD5后缀 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest('./dist/js')) //- 输出文件本地 
     .pipe(rev.manifest()) //- 生成一个rev-manifest.json 
     .pipe(rename({ 
      prefix: "ng-js-", 
     })) 
     .pipe(gulp.dest('./dist')); 
     return stream; 
    }); 


    gulp.task('concat_css', function() { //- 创建一个名为 concat 的 task 
     var stream = gulp.src(css_assets) //- 需要处理的css文件，放到一个字符串数组里 
      .pipe(concat('app.min.css')) //- 合并/**后的文件名 
      .pipe(minifyCss({options: { 
       // processImport: false 
      }})) //- 压缩处理成一行 
      .pipe(rev()) //- 文件名加MD5后缀 
      .pipe(gulp.dest('./dist/css')) //- 输出文件本地 
      .pipe(rev.manifest()) //- 生成一个rev-manifest.json 
      .pipe(rename({ 
       prefix: "css-", 
      })) 
      .pipe(gulp.dest('./dist')); //- 将 rev-manifest.json 保存到 rev 目录内 
     return stream; 
    }); 

    gulp.task('clean', function() { 
     var stream = gulp.src(['./dist/js/*.js', './dist/js/*.js.map', './dist/js/required_lib*'], {read: false}) 
     var stream = gulp.src(['./dist/js/app*.js', 
     './dist/js/app*.js.map', 
     // './dist/css/**/*' 
     ], 
     {read: false}) 
     .pipe(clean({force: true})); 
     return stream; 
    }); 

    gulp.task('update_revision', function() { 
     gulp 
     .src(['./dist/*.json', './portal/index_tpl.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件 
     .pipe(revCollector({replaceReved: true})) //- 执行文件内名的替换 
     .pipe(rename({ 
      basename: "index", 
      extname: ".html" 
     })) 
     .pipe(gulp.dest('./portal')); //- 替换后的文件输出的目录 
    }); 

    gulp.task('revision_portal_page', function() { 
     gulp 
     .src(['./dist/*.json', './index.tmpl.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件 
     .pipe(revCollector({replaceReved: true})) //- 执行文件内名的替换 
     .pipe(rename({ 
      basename: "index", 
      extname: ".html" 
     })) 
     .pipe(gulp.dest('./')); //- 替换后的文件输出的目录 
    }); 

    gulp.task('default', function(callback) { 
     return runSequence(
     'clean', 
     [ 
      'process_ng_js', 
      'process_ng_app' 
     ], 
     // ['process_ng_js','process_ng_app'], 
     ['concat_css'], 
     'update_revision', 
     'revision_portal_page', 
     callback 
    ); 
    }); 

    var js_watcher = gulp.watch(['./app/main/*.js', './app/index**.js'] 
     , ['default']); 
    js_watcher.on('change', function(event) { 
     console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); 
    }); 

    var css_watch = gulp.watch(['.//css/style.css'] 
     , ['default']); 
    css_watch.on('change', function(event) { 
     console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); 
    }); 

    var html_watcher = gulp.watch(['index.tmpl.html', 
     'tour_package.html', 

     ], 
     ['default']); html_watcher.on('change', function(event) { 
     console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); 
    }); 

Webpack (выполняется)

var path = require('path'); 
    var webpack = require('webpack'); 

    module.exports = { 
     entry: [ 
      './index.js' 
     ], 
     output: { 
      path: __dirname, 
      filename: 'bundle.js' // <- could I make it with MD5 string(to invalidate brwoser cache) and update it into index.html ? 
     }, 
     devtool: 'source-map', 
     module: { 
      loaders: [ 
       { 
        test: /\.jsx?$/, 
        loader: 'babel-loader', 
        exclude: /node_modules/, 
        query: { 
         presets: ['es2015', 'react'] 
        } 
       } 
      ] 
     } 
    }; 

Answer 1

Вам нужно добавить [hash] вариант th в webpack укажите в своем выходном файле, следовательно, это позволит долговременное кэширование.

{ 
    output: { 
     path: __dirname, 
     filename: "bundle-[hash].js", 
    } 
} 

Answer 2

webpack уже связывает ваши файлы, что означает «конкатенации». Кроме того, он добавляет хэш сгруппированных файлов, если вы установите выходную часть, как:

output: { 
    path: __dirname, 
    filename: 'bundle-[chunkhash].js' 
} 

для Минимизировать и обрубит операций, которые вы можете использовать webpack plugins. например, для этого, вы можете ниже:

new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
      warnings: false 
     }, 
     minimize: true, 
     mangle: {except: ["myModule1", "myModule2"]} 

, чтобы не нарушить ваши модули, вы можете добавить их в mangle.except массива, как описано выше.

Дополнительная информация, если вы хотите иметь файл манифеста, который отображает имена пакетов файлов, хэшируются имена расслоением файлов в случае дальнейшего использования, вы можете добавить:

new Manifest({ 
    fileName: "bundles" + ".manifest.json" 
}) 

но вам необходимо установить его с помощью НПМ.