捣腾一下 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 等等就不搞啦~~;

代码也很清楚,就是先获取webpack的配置，而后执行webpack命令，而后再将生成入口js md5并替换html中的js 引用。最后开发环境下对src 文件夹进行监听，一改变就从新执行一遍。

这就是个人使用姿式啦，若是有更好的姿式请告诉我哦。

相关文章：https://segmentfault.com/a/1190000003969465

　　　　　http://www.jianshu.com/p/8c9c8f5649c9

项目git：https://github.com/zjb65532788/webpack_gulp

ps:天天记录一点点、天天进步一点点~~