相信看了gulp教程的小伙伴肯定都可以很容易的掌握gulp了。它已经没有什么可以值得去思考的东西了,如果你已经看懂它就是单纯的在布置任务,然后利用插件的功能去执行任务。最后发布任务,pipe的理念来和promise有点相近,就是感觉把一个东西通过src的方法塞进去,然后一个接着一个的冲关,最后dest方法再出去。很简单吧。

在gulp grunt大战中,gulp最终更加赢得人们的喜欢,虽然不可以认为他胜利了。然而就在他俩争的不可开交的时候,webpack的横空出世,让gulp和grunt都翻了一个跟头。所以,这个神秘的webpack做了什么呢。。。。好奇的话,我们就继续看下去吧。。。。

webpack是被人们如此评价的

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源

webpack 的任务模式和gulp不一样

先看一下代码吧

module.exports = {
entry: {
main: './src/js/page/qiao.js'
},
output: {
path:__dirname+'/dist/js/page',
filename:'[name].js'
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
};

这是webpack最主要的三个部分,编译的入口文件,编译的出口文件,编译的loader

相当于gulp的src pipe dest

就是说把一个文件通过entry放进去,然后在loaders里根据文件的格式然后去选择对应的loader,就是编译器,最后在output里边输出文件。

这便是webpack的思想。我们然后一步步看看他具体怎么工作的。

step1 开始前的准备工作,npm init创建package.json,添加devDependencies,然后npm install添加模块和包

{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack-dev-server": "^2.4.5",
"webpack": "^2.4.1"
}
}

 step2 用工具干活 创建webpack.config.js,相当于gulpfile.js。

格式必须module.exports = {}的方式去写,

module.exports = {
entry: {
main: './src/js/page/qiao.qm'
},
output: {
path:__dirname+'/dist/js/page',
filename:'[name].js'
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
};

 step3 执行编译

输入webpack执行编译

这就是webpack的基础能力啦。然后更加牛逼的操作,我们在后边一一展开。

玩转webpack之webpack的基本知识的更多相关文章

  1. Webpack学习-Webpack初识

    一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...

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

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

  3. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  4. 安装webpack和webpack打包(此文转自Henery)

    Henery博客地址为:http://blog.csdn.net/henery_002 写的很详细,可以做参考 最近要做项目优化了,尤其是前端这块,许多js需要模块化管理和相应的优化 1.输入如下地址 ...

  5. 优雅哥学 Webpack - 01 - Webpack 5 快速体验

    程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构 本文摘要:主要讲解 webpack 5 初体验.从webpack 5 初识到便写代码.优雅哥将 ...

  6. 腾讯高级工程师带你玩转打包利器webpack

    随着前端领域飞速发展,webpack将前端不断出现的新模块.新资源.新需求,进行自动化整合.梳理.输出,极大提高了我们的工作效率,成为前端构建领域里最炙手可热的构建工具. 不少人webpack 的使用 ...

  7. 玩转webpack之webpack的entry output

    webpack的入口配置项表示要配置的文件就是开发环境或者生产环境 浏览器本身不能认识的一些东西必须经过webpack的编译才能认识,但是要去写的时候我们经常用到预编译什么的比如scss比如jsx甚至 ...

  8. webpack搭建组件库相关知识

    1 .inquirer.js —— 一个用户与命令行交互的工具 2. existsSync 方法说明: 以同步的方法检测目录是否存在. 如果目录存在 返回 true ,如果目录不存在 返回false语 ...

  9. 从零开始配置webpack(基于webpack 4 和 babel 7版本)

    webpack 核心概念: Entry: 入口 Module:模块,webpack中一切皆是模块 Chunk:代码库,一个chunk由十多个模块组合而成,用于代码合并与分割 Loader:模块转换器, ...

随机推荐

  1. ThinkPHP无限分类模块设计

    public function catelist(){ $cate=D('Cate'); //var_dump($cate->gettree());exit; $cateres=$cate-&g ...

  2. 2017.1.16【初中部 】普及组模拟赛C组总结

    2017.1.16[初中部 ]普及组模拟赛C组 这次总结我赶时间,不写这么详细了. 话说这次比赛,我虽然翻了个大车,但一天之内AK,我感到很高兴 比赛 0+15+0+100=115 改题 AK 一.c ...

  3. 莫烦pytorch学习笔记(七)——Optimizer优化器

    各种优化器的比较 莫烦的对各种优化通俗理解的视频 import torch import torch.utils.data as Data import torch.nn.functional as ...

  4. 19-10-28-A

    竟然?竟然?竟然? 我已经用了半个键盘的编号了$\text{T_T}$ $\mathbb{AFO}$感稍强 h1是不是有点大? ZJ+TJ: T1 以为是什么数据结垢,但是是个链表. 所以可以使用 v ...

  5. Python高质量缩放切图,抗锯齿

    最近刚接触Python,以迅雷不及掩耳盗铃之势(只是迫不及待)应用到工作中去了之前用 cmd+photoshop做批量图像处理(缩放切片),在执行效率(速度)上和灵活度上有很大限制,遂转战Python ...

  6. 基于SpringBoot免费开源的微信管家平台,Jeewx-Boot 1.0.3 版本发布

    项目介绍 JeewxBoot 是一款基于SpringBoot的免费微信开发平台.支持微信公众号.小程序官网.微信抽奖活动.Jeewx-Boot实现了微信公众号管理.小程序CMS.微信抽奖活动等基础功能 ...

  7. MyBatis与JPA的区别

    参考博客: https://www.cnblogs.com/llywy/p/10103136.html https://www.jianshu.com/p/32ce87c163d6 MyBatis分为 ...

  8. vue-cli的使用指南

    vue-cli 2.0 安装vue-cli npm install -g vue-cli 创建一个项目模板 vue init <template-name> <project-nam ...

  9. 2019-8-31-C#-已知点和向量,求距离的点

    title author date CreateTime categories C# 已知点和向量,求距离的点 lindexi 2019-08-31 16:55:58 +0800 2018-05-08 ...

  10. 跟我一起在ubuntu中安装docker

    卸载旧版本 $ sudo apt-get remove docker docker-engine docker.io 查看ubuntu版本 设置安装源 通过如下步骤,设置安装源仓库,这里我们使用阿里源 ...