webpack如何与gulpfile联合的使用
一、对webpack的一些理解
webpack支持CommonJS的书写形式。
CommonJS指一个文件一个模块,但会一次性加载(即同步加载),但在浏览器端不适用这种方式,加载速率什么的,于是引入了异步加载,其中有CMD(sea.js)与AMD(require.js)。
CMD:define(function (require, exports, module) {})延迟加载的方式,等用到资源了再加载,
AMD:define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {})提前加载的方式,用的时候资源已经加载完成
abc.js
- document.write(require('./module.js')) // 添加模块
module.js
- module.exports = 'It works from module.js.'
要上是引用模块的方式
二、安装使用
1.全局安装webpack
- npm install webpack -g
2.建立一个package.json
- npm init
3.安装webpack依赖
- npm install webpack --save-dev
4.使用webpack开发工具,安装webpack-dev-server此时的outpath中没有输出,需要webpack -p发布了才有
- npm install webpack-dev-server --save-dev
注:使用--save-dev的目的是使将所安装的依赖加入到package.json中。
5.调试时执行命令
- webpack-dev-server --progress --colors
6.发布
- webpack -p
三、webpack.config.js的常用功能及配置
1.entry:设置入口。存放主文件
2.output:设置输出
path:输出文件路径
filename:输出文件名称
publicPath:设置资源访问路径,即localhost:8080直接在该目录下访问,否则从根目录下访问
3.loader:Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换
test:匹配希望处理文件的路径
exclude:匹配不希望处理文件的路径
loader:此处xxx-loader可以简写为xxx,?后以query方式传递给loader参数
处理JS
- {
- test: /\.js$/,
- exclude: /node_modules|vue\/src|vue-router\//,
- loader: 'babel'
- //babel可以让我们在编写代码时使用ES6的版本
- }
处理css
- {
- test: /\.css$/,
- loader: ExtractTextPlugin.extract(
- "style-loader",
- "css-loader?sourceMap"
- )
- //loader: "style!css" //用css-loader解析,再用style-loader解析
- }, {
- test: /\.less$/,
- loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
- //loader: "style!css!less"//先用less-loader解析,再用css-loader解析,再用style-loader解析
- }
以上使用extract-text-webpack-plugin
将css从js代码中抽出并合并,如不需要则使用注释的代码
处理图片与字体
- {
- test: /\.(png|jpg)$/,
- loader: 'url-loader?limit=8192' // <= 8kb的图片base64内联
- },
- {
- test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
- loader: 'url?limit=10000&minetype=application/font-woff'
- },
- {
- test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
- loader: 'url?limit=10&minetype=application/font-woff'
- },
- {
- test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
- loader: 'url?limit=10&minetype=application/octet-stream'
- },
- {
- test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
- loader: 'file'
- },
- {
- test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
- loader: 'url?limit=10&minetype=image/svg+xml'
- }
解析vue
- {
- test: /\.vue$/,
- loader: 'vue-loader'
- }
四、插件的使用
1.
- plugins: [
- new webpack.BannerPlugin('This file is created by pcd')
- ]
生成文件的顶部会出现这句话"This file is created by pcd".
2.在package.json中加入
- "scripts": {
- "dev": "BUILD_DEV=1 webpack-dev-server --progress --colors",
- "build": "BUILD_PRERELEASE=1 webpack -p"
- }
开发
- npm run dev
发布
- npm run build
一下贴出我在vue.js简单配置的代码
webpack.config.js
- var webpack = require('webpack')
- module.exports = {
- entry: [
- './src/main.js'
- ],
- output: {
- /* path: __dirname + "/dist/js",
- publicPath: __dirname + "/dist/", *///也可以使用gulp下定义文件的路径
- filename: "app.js"
- },
- watch: true,
- module: {
- loaders: [
- {
- test: /\.js$/,
- exclude: /node_modules/,
- loader: 'babel'
- },
- {
- test: /\.(png|jpg)$/,
- loader: 'url-loader?limit=8192'
- },
- {
- test: /\.vue$/,
- loader: 'vue'
- }
- ]
- },
- babel: {
- presets: ['es2015'],
- plugins: ['transform-runtime']
- },//为了支持mian.js中的import的ES6的语法
- plugins: [
- new webpack.BannerPlugin('This file is create by aaa')
- ]
- }
gulpfile.js
- var gulp = require('gulp');
- var webpack = require('webpack-stream');
- var connect = require('gulp-connect');
- gulp.task('webpack', function() {
- return gulp.src('src/main.js')
- .pipe(webpack(require('./webpack.config.js')))
- .pipe(gulp.dest('dist/js/'))
- .pipe(connect.reload());
- });
- gulp.task('webserver', function() {
- connect.server({
- livereload: true,
- root: 'dist'
- });
- });
- gulp.task('build.index', function(){
- return gulp.src('index.html')
- .pipe(gulp.dest('./dist'));
- });
- gulp.task('default', ['webpack', 'webserver','build.index']);
webpack如何与gulpfile联合的使用的更多相关文章
- gulp入门学习
一.gulp简介 gulp是一个自动化构建工具.在开发过工程中,能够使用gulp对项目进行自动构建,大大提高工作效率. 二.安装gulp 在安装gulp之前先要确认已经正确安装了node.js,然后在 ...
- webpack 5 模块联合
webpack 5 模块联合 webpack 5 https://webpack.docschina.org/concepts/module-federation/ https://github.co ...
- gulp + webpack + sass 学习
笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- webpack入门——webpack的安装与使用
一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...
- 前端构建工具的用法—grunt、gulp、browserify、webpack
随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于N ...
- [转]webpack
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- 基于webpack和vue.js搭建开发环境
前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. ...
- 学习 React(jsx语法) + es2015 + babel + webpack
视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...
随机推荐
- Java基础回顾
学习基础背景:Acmer.有C/C++基础 以[Java语言程序设计(基础篇)]第10版为参考(感谢YJJ的推荐),列出部分知识点,注意思考背后的原因和好处坏处. [14-16章——关于可视化编程的章 ...
- php学习中——知识点(1)
php是嵌入式脚本语言(意义也就不言而喻) 标识:<?php .... ?> 输出:echo "**"; 使用美元符号($)后跟变量名表示变量,区分大 ...
- vmware 下centos7配置网络
步骤一: 虚拟机中的网络设置配置为桥接模式: 步骤二: 注:本人配置的为非静态IP,ip为自动获取 vi /etc/sysconfig/network-scripts/ifcfg-eth0 配置内容如 ...
- while 与do ..while区别
package com.chongrui.test;/*while语句的一般形式如下:while(表达式)语句表达式为非0值,执行while中内嵌语句.它是先判断表达式,在根据表达式值,执行语句.do ...
- 设计模式之单例模式Singleton(三创建型)
1.什么事单例模式? 单例模式确保某个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 单例模式有以下特点: 1.单例类只能有一个实例. 2.单例类必须自己创建自己的唯一实例. 3.单例类必须 ...
- Spring MVC 学习 -- 创建过程
Spring MVC 学习 -- 创建过程 Spring MVC我们使用的时候会在web.xml中配置 <servlet> <servlet-name>SpringMVC< ...
- Centos 下编译安装Redis
安装环境说明: 操作系统:Centos 6.5 -64bit 安装路径:/usr/local/redis 开始编译redis tar -zxvf redis-2.8.19.tar.gz cd redi ...
- CozyRSS开发记录15-获取和显示RSS内容
CozyRSS开发记录15-获取和显示RSS内容 1.内容列表 我们先给RSSContentFrame增加一个ViewModel,里面和RSS源列表一样,提供一个ObservableCollectio ...
- 详解Eclipse断点
原文链接:http://www.blogjava.net/jiangshachina/archive/2011/11/20/364367.html 大家肯定都用过Eclipse的调试的功能,在调试的过 ...
- ActiveMQ
前言 MQ--Message Queue,中文翻译为"消息队列",维基百科上的这样描述: 消息队列(英语:Message queue)是一种进程间通信或同一进程的不同线程间的通信方 ...