一、对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

  1. document.write(require('./module.js')) // 添加模块

module.js

  1. module.exports = 'It works from module.js.'

要上是引用模块的方式

二、安装使用

1.全局安装webpack

  1. npm install webpack -g

2.建立一个package.json

  1. npm init

3.安装webpack依赖

  1. npm install webpack --save-dev

4.使用webpack开发工具,安装webpack-dev-server此时的outpath中没有输出,需要webpack -p发布了才有

  1. npm install webpack-dev-server --save-dev

注:使用--save-dev的目的是使将所安装的依赖加入到package.json中。

5.调试时执行命令

  1. webpack-dev-server --progress --colors

6.发布

  1. 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

  1. {
  2. test: /\.js$/,
  3. exclude: /node_modules|vue\/src|vue-router\//,
  4. loader: 'babel'
  5. //babel可以让我们在编写代码时使用ES6的版本
  6. }

处理css

  1. {
  2. test: /\.css$/,
  3. loader: ExtractTextPlugin.extract(
  4. "style-loader",
  5. "css-loader?sourceMap"
  6. )
  7. //loader: "style!css" //用css-loader解析,再用style-loader解析
  8. }, {
  9. test: /\.less$/,
  10. loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
  11. //loader: "style!css!less"//先用less-loader解析,再用css-loader解析,再用style-loader解析
  12. }

以上使用extract-text-webpack-plugin将css从js代码中抽出并合并,如不需要则使用注释的代码

处理图片与字体

  1. {
  2. test: /\.(png|jpg)$/,
  3. loader: 'url-loader?limit=8192' // <= 8kb的图片base64内联
  4. },
  5. {
  6. test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
  7. loader: 'url?limit=10000&minetype=application/font-woff'
  8. },
  9. {
  10. test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
  11. loader: 'url?limit=10&minetype=application/font-woff'
  12. },
  13. {
  14. test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
  15. loader: 'url?limit=10&minetype=application/octet-stream'
  16. },
  17. {
  18. test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
  19. loader: 'file'
  20. },
  21. {
  22. test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  23. loader: 'url?limit=10&minetype=image/svg+xml'
  24. }

解析vue

  1. {
  2. test: /\.vue$/,
  3. loader: 'vue-loader'
  4. }

四、插件的使用

1.

  1. plugins: [
  2. new webpack.BannerPlugin('This file is created by pcd')
  3. ]

生成文件的顶部会出现这句话"This file is created by pcd".

2.在package.json中加入

  1. "scripts": {
  2. "dev": "BUILD_DEV=1 webpack-dev-server --progress --colors",
  3. "build": "BUILD_PRERELEASE=1 webpack -p"
  4. }

开发

  1. npm run dev

发布

  1. npm run build

一下贴出我在vue.js简单配置的代码

webpack.config.js

  1. var webpack = require('webpack')
  2.  
  3. module.exports = {
  4. entry: [
  5. './src/main.js'
  6. ],
  7. output: {
  8. /* path: __dirname + "/dist/js",
  9. publicPath: __dirname + "/dist/", *///也可以使用gulp下定义文件的路径
  10. filename: "app.js"
  11. },
  12. watch: true,
  13. module: {
  14. loaders: [
  15. {
  16. test: /\.js$/,
  17. exclude: /node_modules/,
  18. loader: 'babel'
  19. },
  20. {
  21. test: /\.(png|jpg)$/,
  22. loader: 'url-loader?limit=8192'
  23. },
  24. {
  25. test: /\.vue$/,
  26. loader: 'vue'
  27. }
  28.  
  29. ]
  30. },
  31. babel: {
  32. presets: ['es2015'],
  33. plugins: ['transform-runtime']
  34. },//为了支持mian.js中的import的ES6的语法
  35. plugins: [
  36. new webpack.BannerPlugin('This file is create by aaa')
  37. ]
  38. }

gulpfile.js

  1. var gulp = require('gulp');
  2. var webpack = require('webpack-stream');
  3. var connect = require('gulp-connect');
  4.  
  5. gulp.task('webpack', function() {
  6. return gulp.src('src/main.js')
  7. .pipe(webpack(require('./webpack.config.js')))
  8. .pipe(gulp.dest('dist/js/'))
  9. .pipe(connect.reload());
  10. });
  11.  
  12. gulp.task('webserver', function() {
  13. connect.server({
  14. livereload: true,
  15. root: 'dist'
  16. });
  17. });
  18.  
  19. gulp.task('build.index', function(){
  20. return gulp.src('index.html')
  21. .pipe(gulp.dest('./dist'));
  22. });
  23.  
  24. gulp.task('default', ['webpack', 'webserver','build.index']);

  

webpack如何与gulpfile联合的使用的更多相关文章

  1. gulp入门学习

    一.gulp简介 gulp是一个自动化构建工具.在开发过工程中,能够使用gulp对项目进行自动构建,大大提高工作效率. 二.安装gulp 在安装gulp之前先要确认已经正确安装了node.js,然后在 ...

  2. webpack 5 模块联合

    webpack 5 模块联合 webpack 5 https://webpack.docschina.org/concepts/module-federation/ https://github.co ...

  3. gulp + webpack + sass 学习

    笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...

  4. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  5. webpack入门——webpack的安装与使用

    一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...

  6. 前端构建工具的用法—grunt、gulp、browserify、webpack

    随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于N ...

  7. [转]webpack

    什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...

  8. 基于webpack和vue.js搭建开发环境

    前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. ...

  9. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

随机推荐

  1. Java基础回顾

    学习基础背景:Acmer.有C/C++基础 以[Java语言程序设计(基础篇)]第10版为参考(感谢YJJ的推荐),列出部分知识点,注意思考背后的原因和好处坏处. [14-16章——关于可视化编程的章 ...

  2. php学习中——知识点(1)

    php是嵌入式脚本语言(意义也就不言而喻) 标识:<?php ....  ?>         输出:echo "**"; 使用美元符号($)后跟变量名表示变量,区分大 ...

  3. vmware 下centos7配置网络

    步骤一: 虚拟机中的网络设置配置为桥接模式: 步骤二: 注:本人配置的为非静态IP,ip为自动获取 vi /etc/sysconfig/network-scripts/ifcfg-eth0 配置内容如 ...

  4. while 与do ..while区别

    package com.chongrui.test;/*while语句的一般形式如下:while(表达式)语句表达式为非0值,执行while中内嵌语句.它是先判断表达式,在根据表达式值,执行语句.do ...

  5. 设计模式之单例模式Singleton(三创建型)

    1.什么事单例模式? 单例模式确保某个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 单例模式有以下特点: 1.单例类只能有一个实例. 2.单例类必须自己创建自己的唯一实例. 3.单例类必须 ...

  6. Spring MVC 学习 -- 创建过程

    Spring MVC 学习 -- 创建过程 Spring MVC我们使用的时候会在web.xml中配置 <servlet> <servlet-name>SpringMVC< ...

  7. Centos 下编译安装Redis

    安装环境说明: 操作系统:Centos 6.5 -64bit 安装路径:/usr/local/redis 开始编译redis tar -zxvf redis-2.8.19.tar.gz cd redi ...

  8. CozyRSS开发记录15-获取和显示RSS内容

    CozyRSS开发记录15-获取和显示RSS内容 1.内容列表 我们先给RSSContentFrame增加一个ViewModel,里面和RSS源列表一样,提供一个ObservableCollectio ...

  9. 详解Eclipse断点

    原文链接:http://www.blogjava.net/jiangshachina/archive/2011/11/20/364367.html 大家肯定都用过Eclipse的调试的功能,在调试的过 ...

  10. ActiveMQ

    前言 MQ--Message Queue,中文翻译为"消息队列",维基百科上的这样描述: 消息队列(英语:Message queue)是一种进程间通信或同一进程的不同线程间的通信方 ...