你的位置:首页 > Java教程

[Java教程]《nodejs+gulp+webpack基础实战篇》课程笔记(三)


webpack引入

  前面我们简单学习了gulp,这时一个前端构建框架---webpack产生了(模块打包) 它能帮我们把本来需要在服务端运行的JS代码,通过模块的引用和依赖打包成前端可用的静态文件。(这里有需要了解一下CommonJS规范,具体请自行查看http://commonjs.org)。

  安装webpack:

npm install -g wabpack //这里我们采用全局安装,保证每个项目中都能使用到

  设置配置文件:

    在项目目录下,新建一个webpack.config.js文件

module.exports={  entry:[           //entry是入口文件,可以多个,代表要编译哪些JS    './xiaozu.js'  ],  output:{    path:'./build/js',   //输出文件夹    filename: 'build.js'  //最终打包生成的文件名  }}

  OK ,然后我们就可以运行测试下。这里测试我就省略了。


webpack和gulp"勾结"初步 

npm install gulp-webpack --save-dev //这是一个可以无比方便的关联gulp和webpack的插件

  接着,我们来测试下:老规矩,老师设计一个需求,1、首先使用CommonJS规范编写代码 2、利用webpack 编译JS文件。 3、编译好后用gulp压缩。注意:需要一次性完成,而不是敲两次命令 .

  在gulpfile.js中引入

var gulp_webpack = require("gulp-webpack");

//gulpfile.js文件var gp = require("gulp");var gulp_concat = require("gulp-concat");var gulp_uglify = require("gulp-uglify");var gulp_webpack = require("gulp-webpack");gp.task("xiaozu",function(){  gp.src(['xiaozu.js'])    .pipe(gulp_webpack())    //首先编译    .pipe(gulp_uglify())    //压缩    .pipe(gp.dest('./build/js'));  gp.src(['*.css']).pipe(gp.dest('./build/css'));});

  然后我们测试后,发现最终生成的文件名不是可控的。说明1、没有加载配置文件 2、同时并没有调用我们上节课独立安装的webpack(请注意,gulp-webpack插件中有个webpack)。这里们肯定是需要调用我们自己“独立”安装的webpack(版本可控)。

  两种方式:第一种依然只使用gulp-webpack ,但是我们需要传入一个配置文件对象。

var webpack_config=require(“./webpack.config.js”);//这是webpack本身的配置 gulp-webpack 第一个参数就是给你传配置的。

  其中我们还需要修改一下webpack.config.js

 output:{    path: __dirname+'/build/js',   //输出文件夹    filename: 'build.js'  //最终打包生成的文件名  }

  第二种办法,使用我们独立安装的webpack

//在gulpfile.js文件中引用 var webpack = require(‘webpack’);  //第一个参数传入配置文件,第二个参数是独立的webpackgulp_webpack(gulp_webpack_config,webpack)

//现在gulpfile.js的内容var gp = require("gulp");var gulp_concat = require("gulp-concat");var gulp_uglify = require("gulp-uglify");var gulp_webpack = require("gulp-webpack");var webpack = require("webpack");var webpack_config = require("./webpack.config.js");gp.task("xiaozu",function(){  gp.src(['xiaozu.js'])    .pipe(gulp_webpack(webpack_config,webpack))    //传入参数,引入webpack的配置,再编译    .pipe(gulp_uglify())    //压缩    .pipe(gp.dest('./build/js'));  gp.src(['*.css']).pipe(gp.dest('./build/css'));});

  版权声明:笔记整理者亡命小卒热爱自由,崇尚分享。但是本笔记源自www.jtthink.com(程序员在囧途)沈逸老师的《前端开发速学成财(nodejs+gulp+webpack基础实战篇)》。本学习笔记小卒于博客园首发, 如需转载请尊重老师劳动,保留沈逸老师署名以及课程来源地址    

上一课:《nodejs+gulp+webpack基础实战篇》课程笔记(二)--gulp速度上手