上一片博文主要让大家了解下究竟webpack是干什么的,明显它是专注于打包的。


gulp  和  webpack  的区别

gulp,要求我们一步步写task(es6编译、css压缩、图片压缩、打包...),全过程都是我们掌控的(一开始项目小的时候,我们觉得灵活,但是后来项目复杂度上来了,我们觉得这样写task也太恶心了)。

webpack,只要写好配置文件,就会帮我们处理好各种零散的html、css、js(这里包括它们的预编译语言例如jade、sass、es6、typescript等),然后打包成一个js文件。

gulp和webpack最明显的区别就是webpack自动化程度更高,不用自己写各种各样的稀奇古怪的task。


使用:

1.安装

webpack和gulp一样都要先全局安装一次,再在项目安装一次:

npm i webpack -g
npm i webpack -D

ps:全局安装是为了能获取本地模块

2.配置文件

默认配置文件名:webpack.config.js

如果想用其他名字例如:1.config 调用webpack时请用 webpack --config 1.config

//webpack.config.js
const path = require('path');
//一个入口对一个最终打包的js
//单入口写法
module.exports = {
entry: './src/script/main.js',
output: {
path: path.solve('./dist'),
filename: 'bundle.js'
}
}
-----------------------------------------------------------------------------------------------------
//多个平行依赖入口写法,最终会打包在一起
module.exports = {
entry: ['./src/script/main.js','./src/script/main2.js','./src/script/main3.js'],
output: {
path: path.solve('./dist'),
filename: 'js/bundle.js'
}
}
-----------------------------------------------------------------------------------------------------
//多入口写法,最终会打包多个文件
//[name] 这里是page1 page2
//[hash] 这个每次打包生成的一个hash(签名)值
//[chunkhash] 这个是每个打包文件的md5 hash
module.exports = {
entry: {
page1 :'./src/script/main.js',
page2 :'./src/script/main2.js'
},
output: {
path: path.solve('./dist'),
filename: 'js/[name]-[chunkhash].js'
}
}

3.生成index.html(自动插入打包好的js文件)

之前的文件都不能自动将打包文件放入index.html中,所以我们要借助新的插件html-webpack-plugin(需安装)

//webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
a:'./src/script/main.js',
b:'./src/script/main2.js'
},
output: {
path: path.solve('./dist'),
filename: 'js/bundle.js'
},
plugins:[
new htmlWebpackPlugin({
template: 'index.html', //以当前目录下的index.html为模板
filename: 'index-[hash].html',
inject: 'head',//默认时body
hahaha: '自定义属性的自定义内容' ,//这个内容可以在模板上用ejs语法调用,例如<%=htmlWebpackPlugin.options.hahaha%>
minify: { //压缩html
removeCommet: true, //去注释
collapseWhitespace: true //去空格
},
chunks:[a], //要入口js a
excludeChunks:[b] //不要入口js b chunks和excludeChunks随便写一个就行
})
]
}

webpack进阶--打包的更多相关文章

  1. webpack进阶构建项目(一)

    webpack进阶构建项目(一) 阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解ba ...

  2. webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  3. webpack进阶用法你都get到了么?

    如何消除无用代码:打包自己的私有js库:实现代码分割和动态import提升初次加载速度:配置eslint规范团队代码规范:打包异常抓捕你都get到了么? 摇树优化:Tree Shaking webpa ...

  4. webpack独立打包与缓存处理

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpa ...

  5. express整合webpack的打包文件dist

    对于我来说,第一次接触前后端整合问题的小白,刚开始是一脸懵逼,这个问题整整坑了我一个晚上加一个早上,现在写出来总结: 前端开发:vue-cli+webpack: 后台开发:nodejs框架expres ...

  6. webpack 基本打包方法

    webpack的打包基本配置文件webpack.config.js 可以在webpack.config.js里面写好配置:比如前章节所总结的四大核心 |-- add.js // 定义一个普通加法函数 ...

  7. webpack 单独打包指定JS文件(CopyWebpackPlugin)

    背景: 不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件.npm install --save-dev ...

  8. webpack项目打包配置

    webpack.config.js 文件中,其中“plugins”最为重要 var path = require("path"); const webpack = require( ...

  9. webpack 安装,打包使用

      Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. 全局安装webpack 打开文件夹amd输入指令  npm i webpa ...

随机推荐

  1. kvm虚拟化二: 字符界面管理及 无人值守安装

    1. 安装必要工具yum install / tigervnc //vnc远程桌面客户端 virt-viewer //虚拟机查看器 2.安装虚拟机virt-install / -n 名字 //虚拟机名 ...

  2. CentOS7永久挂载硬盘

    刚新装一台服务器,有一块120G的SSD和一块1T的HHD,把cenos7装在了SSD上,进系统默认是找不到HHD的,现需要将其挂载上去. 1.先查看服务器的硬件信息 # fdisk -l 可以看到如 ...

  3. pycharm最常用的快捷键总结

    工欲善其事必先利其器,Python开发利器Pycharm常用快捷键以及配置如下,相信有了这些快捷键,你的开发会事半功倍 一 常用快捷键 编辑类: Ctrl + D             复制选定的区 ...

  4. 【Orleans开胃菜系列1】不要被表象迷惑

    [Orleans开胃菜系列1]不要被表象迷惑 /** * prism.js Github theme based on GitHub's theme. * @author Sam Clarke */ ...

  5. How to export data from Thermo-Calc 如何从Thermo-calc导出文本数据

    记录20180510 问题:如何从thermo-calc导出文本数据供origin绘图? 解决: In Thermo-Calc graphical mode, you can just add a ' ...

  6. unity小地图制作___按比例尺图标布局

    1. 2.这里小地图显示的范围为整个空间区域,而不是单独的相机渲染区域 3. 4. 5. using System.Collections; using System.Collections.Gene ...

  7. 浅谈我的UI设计之路

    时光匆匆,进入UI学习已经快两个月了,这段时间过得很充实,因为有压力才有收获. 还记的刚刚学习手绘的时候,对于这个行业只有一个初步的认识,知道自己喜欢,但是真正学习的时候才发现,我要学习的东西还有很多 ...

  8. 用信鸽来讲解HTTPS的知识

    加密是一个很难理解的东西,这里头满是数学证明.不过,除非你是在开发一个加密系统,否则无需了解那些高阶的复杂知识. 如果你看这篇文章是为了创造下一个 HTTPS 协议,很抱歉,请出门左走,鸽子是远远不够 ...

  9. Istio 流量治理功能原理与实战

    一.负载均衡算法原理与实战 负载均衡算法(load balancing algorithm),定义了几种基本的流量分发方式,在Istio中共有4种标准负载均衡算法. •Round_Robin: 轮询算 ...

  10. OpenState之 Mac学习 实验

    OpenState之 Mac学习 实验 目录 OpenState安装 Port Knocking 实验 Mac Learning 实验 环境要求: 系统ubuntu 14.04 mininet:2.3 ...