首页 > 代码库 > gulp+webpack构建前端项目

gulp+webpack构建前端项目

2024-08-17 20:32:56   216人阅读

本文将介绍如何利用gulp+webpack构建一个基本的前端项目。假设你已经安装了node环境并且会使用简单的命令行

1、gulp安装

　　（1）全局安装

npm install gulp -g

　　（2）查看gulp是否安装成功

gulp -v

 

　　技术分享

　　（3）进入本地目录，新建gulpfile.js

 

2、安装gulp-webpack插件

　　基于gulp的插件非常多，建议大家查看npm官网https://www.npmjs.com

　　（1）安装

　　webpack的用途主要是模块化+打包。安装敲入命令

npm install gulp-webpack

　　（2）gulpfile.js中引入

　　在gulpfile.js中引入依赖，并编写打包的出入口，这样一个基本的gulp+webpack构建就实现了

var gulp=require(‘gulp‘);
var webpack=require(‘gulp-webpack‘);
gulp.task(‘default‘,function(){
　　return gulp.src(‘src/entry.js‘)
　　　　.pipe(webpack())
　　　　.pipe(gulp.dest(‘/dist/‘));
})

 

　　（3）动态获取打包文件入口

　　补充一个知识点，gulp的入口文件是可以动态获取的，比如src下的所有js目录可以写成“src/*.js”，但是webpack没有这样的统配符，所以可以结合node的模块，fs，path 或者glob来使用返回入口文件的数组

//方法1：使用path和fs模块
function getEntry() {
    var jsPath = path.resolve(srcDir, ‘js‘);
    var dirs = fs.readdirSync(jsPath);
    var matchs = [], files = {};
    dirs.forEach(function (item) {
        matchs = item.match(/(.+)\.js$/);
        if (matchs) {
            files[matchs[1]] = path.resolve(srcDir, ‘js‘, item);
        }
    });
   return files;
}

 

//方法2：使用glob模块
glob("src/*.js",function (er, files) {
   return files;
})

　　关于gulp-webpack的更多用法查看网址：https://www.npmjs.com/package/gulp-webpack

　　

 

gulp+webpack构建前端项目


联系
我们