webpack从0开始

(1)创建目录文件,进行npm init
(2)进行webpack的全局安装

cnpm i webpack -g

(3)进行webpack的局部安装

cnpm i webpack@1.15.0 --save-dev //带版本号的安装

(4)进行项目依赖安装

cnpm install

(5)创建webpack.config.js文件并初始配置
image.png

(6)命令行使用webpack命令运行得到打包结果
image.png
(7)webpack的那些插件们

clean-webpack-plugin用于在building之前删除你以前build过的文件


html-webpack-plugin 用于解决修改入口与出口文件后html引用script文件变化的问题。


webpack-merge


uglifyjs-webpack-plugin


内置的webpack.optimize.CommonsChunkPlugin


copy-webpack-plugin

(8)单文件入口简单打包
image.png

(9)服务与热更新
  1. 在命令行安装 cnpm i webpack-dev-server --save

image.png

  1. 进行devServer的配置

image.png
  1. 配置启动命令,增加--open来自动启动网站

image.png

(10)面试题
image.png

(11)对css进行处理

对应loader的下载


image.png

(12)配置JS的压缩
image.png
(13)webpack的功能

css的处理


图片的处理


自动生成index.html文件并自动添加所有script


为了更容易地追踪错误和警告,JavaScript 提供了 source map 功能,将编译后的代码映射回原始源代码。如果一个错误来自于 src/app.js,source map 就会明确的告诉你


缓存,webpack 编译生成的文件能够被客户端缓存,而在文件内容变化后,能够请求到新的文件


文件路径别名alias

推荐阅读更多精彩内容

  • 本文作者 Jinkey(微信公众号 jinkey-love,官网 https://jinkey.ai)原文链接 h...
    JinkeyAI阅读 421,644评论 153 916
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 8,907评论 0 21
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 7,390评论 7 35
  • 前言 众所周知目前比较火的工具就是gulp和webpack,但webpack和gulp却有所不同,本人两者的底层研...
    cduyzh阅读 1,027评论 0 13
  • 收获金秋,助“译”无忧! 1注册就送268元翻译体检金; 2限时注册送话费; 3首次下单抢话费 参与流程:译云平台...
    4ca9e5d923d9阅读 4,390评论 0 50
  • 欢迎关注【M实事摘要】,这是一则立足中国放眼全球的AI和无人驾驶汽车(SDC)的实事简报(Newsletter)。...
    MurphyWan阅读 152评论 0 1
  • 之前写了一个音推《幸福太短,思念太长》,悲伤的笔触,我分不清是自己的情绪,或者只是对那些歌曲的领悟。时间是一剂良药...
    念情笑笑阅读 119评论 0 0
  • 城市的夜景 埋葬了多多少少的人的气喘的灵魂 一个被挣扎过的牢笼 一片居无定所的悲苦 夜景的喧嚣 淹没了你我他的歇斯...
    鸟嘴萝卜头阅读 101评论 5 0