搗騰一下 webpack+gulp 使用姿式~

時間 2020-08-11

標籤搗騰一下 webpack+gulp webpack gulp 使用欄目 JavaScript 简体版

原文原文鏈接

　　隨着前端技術的發展，MV*框架雨後春筍般的出現啦~同時不少前端構建工具也受到了追捧。javascript

　　今天就來講一下webpack + gulp實現前端工程化的姿式吧（自我感受這個姿式還不夠好，大家有更好的姿式求告訴！）css

webpack是什麼？html

　　webpack是一個模塊加載器，在webpack中，全部的資源都被看成模塊（js、css、圖片等等）。對應不一樣的文件類型資源，webpack有對應的模塊loader去解析他們(css就有style-loader、css-loader、less-loader)。同時也對commonjs和amd 進行了支持。vue

　　gulp是什麼？java

　　gulp是基於流的自動化構建工具。webpack

　　先看一下目錄結構吧git

src是咱們的源文件，gulpfile.js是gulp的配置文件，webpack.config.js 是webpack的配置文件。entrys是全部的js入口文件。dist 是咱們的目標文件就是最後自動生成的東東都放在這裏哦。es6

　在這裏咱們用webpack對咱們的js進行一個解析（好比es6啊、less啊、sass啊）並打包處理。webpack的配置文件能夠默認命名爲webpack.config.js，咱們來具體看一下配置吧github

var webpack = require('webpack'),//依賴引入
    fs=require('fs');

var entryPath="./src/entrys"; 
var outputPath="./dist";

//循環入口文件夾 讀取入口文件
var entrys= fs.readdirSync(entryPath).reduce(function (o, filename) {
    /\.js$/g.test(filename) &&
    (o[filename.replace(/\.js$/g,'')] = entryPath+'/'+filename);
    return o;
  }, {}
);
//entrys['vendors']=['vue']//一些公用的vue啊 等等。

module.exports={
    entry:entrys,//入口文件
    output:{
        publicPath:"/dist",//相應的域名哦 如 "http://localhost"
        path: outputPath,//目標文件夾
        filename: 'oldjs/[name].js',
        chunkFilename: '/chunks/[hash].[name].chunk.js'//一些異步加載的會打包在這裏哦
    },
    resolve: {
          extensions: ['', '.js', 'jsx','vue'],//是能夠忽略的文件後綴名，好比能夠直接require('Header');而不用加.js。
    },
    module:{
        loaders: [//所依賴的模塊解析器
            {//es6咯 畢竟瀏覽器解析不了es6 因此須要解析器解析成es5 就先只用這個咯。
                test: /\.js$/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            },
            /*{//解析less咯
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            }, // use ! to chain loaders
            {//解析css 咯
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }, 
              { //web字體庫什麼的咯
                  test: /\.(woff|svg|eot|ttf)\??.*$/, 
                  loader: 'url-loader?limit=50000'},
              {//圖片哈
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192'
            } // inline base64 URLs for <=8k images, direct URLs for the rest*/
        ]
    },
    plugins: [
        // kills the compilation upon an error.
        // this keeps the outputed bundle **always** valid
        new webpack.NoErrorsPlugin(),
        //這個使用uglifyJs壓縮你的js代碼
        new webpack.optimize.UglifyJsPlugin({minimize: true}),
        new webpack.optimize.CommonsChunkPlugin('vendors', '/js/vendors.js')
    ]
}

這裏咱們定義一個簡單入口文件在src/entrys/hello.js，以及一個異步加載的js 文件 src/js/require1.js

hello.js:

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

//es6因此須要 babel加載器去解析 let僅在塊級做用域內有效
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

document.onclick=function(){  //異步加載哦 也就是 require.js 會被打包成chunk****.js
    require.ensure(['../js/require1.js'], function(require) {
        var a = require("../js/require1.js");
        console.log(a);
    });
}

require1.js:

console.log('dddd');
module.exports={
    'a':'111'
}

一個html文件引用相應的js，src/html/hello.html

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script type="text/javascript" src="/dist/js/vendors.js"></script>
        <script type="text/javascript" src="/dist/js/hello.js"></script>
    </body>
</html>

而後咱們之間執行webpack

這樣就生成了一個 vendors.js 公用的js 、咱們的入口 hello.js 以及一個咱們異步加載的 chunk.js

接着咱們就經過gulp 來實現自動化構建，他的配置能夠默認放在 gulpfile.js 中，不廢話上代碼啦

var gulp = require('gulp'),
    webpack = require('webpack'),
    md5 = require('gulp-md5-plus'),
    gutil = require('gulp-util'),
    clean = require('gulp-clean');//清理文件


var webpack_config=require('./webpack.config.js');//獲得webpack的配置
var devCompiler = webpack(webpack_config);

//執行打包流
gulp.task('build',function(callback){
    devCompiler.run(function(err, stats){
        gutil.log("[webpack:build-js]", stats.toString({
            colors: true
        }));
        callback();//執行完後執行下一個流
    });
});

//將js加上10位md5,並修改html中的引用路徑，該動做依賴build-js
gulp.task('md5:js', ['fileinclude'], function (done) {
  gulp.src('dist/oldjs/**/*.js')
       .pipe(md5(10, 'dist/html/**/*.html'))
       .pipe(gulp.dest('dist/js'))
       .on('end', done);
});

/*gulp.task('clean', ['md5:js'], function (done) {
    gulp.src(['dist/js'])
        .pipe(clean())
        .on('end', done);
});*/

//將html 文件放到dist中
gulp.task('fileinclude', ['build'], function (done) {
   gulp.src('src/html/**/*.html')
       .pipe(gulp.dest('dist/html'))
       .on('end', done);
});



gulp.task('watch', function (done) {
    gulp.watch('src/**/*', ['build','fileinclude','md5:js'])
        .on('end', done);
});

gulp.task('dev', ['build','watch','fileinclude','md5:js']);

gulp.task('default', ['build','fileinclude','md5:js']);//生產環境 還要替換md5 等等就不搞啦~~;