webpack打包
Webpack
官方网址:(webpack)[https://www.webpackjs.com/]
1.什么是webpack
- 它是一个模块打包器，它能够把所有的文件都当作是模块
- 它把所有的文件资源（js、json、css、sass,图片）都看作为模块
- 将这些文件资源 解析处理以后，生成对应的打包的文件
- 使用webpack构建一些应用也是非常的方便比如基于node webpack vue-cli 构建vue程序（脚手架）
-webpack 是一个基于 Node.js 运行环境。用于打包本地文件之间相互依赖并最终输出成单个文件的工具.
就像 npm 工具可以下载安装包一样.
-webpack 能够帮助我们解决模块之前相互依赖的问题.并把多个相互依赖的js文件生成一个js文件.
-- loader(加载器)
- 默认情况下，在webpack中，它只认识js文件。如果要加载其它文件
- 如果要加载其它模块的文件（.css、.jpg,json,url-loader,file-loader）
我需要使用对应的loader才可以处理。
- loader( 加载器 )
- 其它loader是webpack当中（node中）封装的一些函数
require('./a.js')
require('./data.json')
import a from "./data"
rquire('./css.css') 错的
css-loader
css-loader( './css.css' )
function css-loader( path ){
fs.readFile( path )
}
-- 其他插件
- 插件可以完成一些loader不能完成的一些任务
- 比如我要生成一个html文件，这个都需要使用对应的插件。
2.安装
全局安装在
打开cmd 运行：
2.1. npm install webpack@3 -g
npm uninstall webpack@3 :卸载安装的文件
安装在
C:\Users\sam\AppData\Roaming\npm\node_modules
2.2 在项目中 npm init -y
注意点：目录名不能是中文
package.json name :
-y 一路yes 生成package.json
2.3打包
目录结构
- webpackDemo
|- src 源文件
|-app.js入口文件
|- dist 打包生成的文件
|—bundle.js打包生成的js
|- index.html
|- webpack.config.js
|- package.json
a.js export暴露
app.js入口文件中 引入 import {a,fun} from "./a"
b.json定义了json数据
app.js入口文件中 import json form "./b" json可以随便起
打包的命令
webpack 源文件 目标文件
webpack ./src/app.js ./dist/bundle.js
bundle.js名字也是随便起的
2.4 行命令繁琐,
webpack 源文件的路径 输出的路径
webpack
入口(entry)
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
每个依赖项随即被处理，最后输出到称之为 bundles 的文件中，我们将在下一章节详细讨论这个过程。
可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。
出口(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
webpack.config.js
简化 webpack打包
webpack配置文件
webpack.config.js
module.exports = {
//path.resolve 将相对路径的片段解析为绝对路径
//规定入口文件 c:/demo1/src/app.js
entry: path.resolve('./src/app.js'),
//出口
output:{
//出口的路径
path:path.resolve(__dirname,"./dist"),
//输出文件的名字
filename:"bundle.js"
}
};
项目根目webpack录下
运行
3.打包css
loader(加载器)
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
在更高层面，在 webpack 的配置中 loader 有两个目标：
test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
正则 匹配/\.css$/ /\.jpg|png|/
use 属性，表示进行转换时，应该使用哪个 loader。
3.安装相关包
style-loader css-loader
第一步:
npm i style-loader css-loader -D == --save-dev
-S == --save
--save 并在package文件的dependencies节点写入依赖。
--save-dev 并在package文件的devDependencies节点写入依赖
css-loader
打包时把css文件拆出来，css相关模块最终打包到一个指定
的css文件中，
我们手动用link标签去引入这个css文件就可以了
style-loader的作用
在引入css时，在最后生成的js文件中进行处理，
动态创建style标签，塞到head标签里；
第二步:
创建style.css 并书写相关样式
第三步：
app.js中引用用到的样式；
require('./style.css');
或者
import css from "./style.css"
注意：加载后缀名不能省略
第四步：
在webpack.config.js里配置loader
//module中配置的是loader 加载器
//webpack 配置中指定多个 loader
//放在output大括号结束，后面
module: {
//规则
rules: [{
//以.css为后缀名的文件 style.css
test: /\.css$/,
//使用style-loader css-loader
//loader的执行顺序是从右到左
use: ['style-loader','css-loader']
/*
css 解析css文件
style 动态的创建style标签 塞进去
*/
}]
}
loaders是一个数组，其中的元素是我们使用的所有loader，
每个loader对应一个object，test是加载器要匹配的文件后缀正则
上述loader配置表示，webpack在打包过程中，遇到后缀为css的文件，test
就会使用use
style-loader和css-loader去加载这个文件。
1.遇到后缀为.css的文件，webpack先用css-loader加载器去解析这个文件，
遇到“@import”等语句就将相应样式文件引入（所以如果没有css-loader，就没法解析这类语句），
最后计算完的css，将会使用style-loader生成一个内容为最终解析完的css代码的style标签，
放到head标签里。
2.loader是有顺序的，webpack肯定是先将所有css模块依赖解析
完得到计算结果再创建style标签。
因此应该把style-loader放在css-loader
的前面（webpack loader的
执行顺序是从右到左）。
4.打包css中的图片
下载相关包
第一步：下载url-loader file-loader
npm i url-loader file-loader -D
url-loader的作用
通过base64编码的方法来展示图片。webpack中有一个包叫做url-loader，
他可以将html以及css中的图片打包成base64
base64就是一串加密的字符串。
而且base64编码过的图片是没有http请求的
但是处理图片，它依赖于file-loader
url-loader可以将图片转为base64字符串，能更快的加载图片，一旦图片过大，
就需要使用file-loader的加载本地图片，
故url-loader可以设置图片超过多少字节时，file-loader去加载 不超过使用base64
使用url-loader
webpack.config.js中 (放在rules配置css下面)
{
test: /\.(png|jpg|gif)$/, //正则匹配png.gifjpg的图片
use: [
{
loader: 'url-loader',
options: {
limit: 400*1024 //小于8192的进行打包 图片大小
}
}
]
},
5. 压缩js文件
为什么要压缩?
在没有使用压缩功能时,文件都是原样输出的.
.css 是啥样,webpack 打包后就是啥样.
.bundle.js 是啥样 ,webpack 打包后就是啥样.
image 多大,webpack打包后就是多大.
即使是 base64,也是按照原图片尺寸大小编码的.
压缩文件可以减少文件大小,对于文本文件,
可以去除不必须要的空格和换行.对于图片文件,可以把质量调低.
文件大小小了,网络字节量也就小了.用户下载速度就会变快.
压缩js文件其实很简单.
无非就是利用 webpack 自带的
webpack.optimize.UglifyJsPlugin() 来进行压缩.
第一步:下载
npm init -y 生成package.json
安装npm i --save-dev webpack@3
在webpack.config.js文件的 plugins 节点中,
配置
new webpack.optimize.UglifyJsPlugin()
即可完成js文件压缩.
step 1.
安装 webpack@3.1.0
npm i --save-dev webpack@3.1.0
step 2.
webpack.config.js文件中新添加一个插件
var webpack = require("webpack");
//plugins: [new webpack.optimize.UglifyJsPlugin() // 压缩js文件]
plugins:[
new htmlWebpackPlugin({
//生成的html文件 不用指定输出目录 因为出门文件已经设置
filename:"a.html",
//已经有的html
template:"./index.html"
}),
new webpack.optimize.UglifyJsPlugin(),
//单独打包 生成的路径的
new ExtractTextPlugin("style.css"),
//压缩
new OptimizeCssplugin()
]
step 3.
webpack
将js进行压缩了
压缩css文件.
首先,我们需要将 css 文件单独打包.
所以要先安装 extract-text-webpack-plugin@3.0.2.
step 1.
npm i --save-dev extract-text-webpack-plugin@3.0.2
step 2.
安装压缩 css 文件的插件
npm install --save-dev optimize-css-assets-webpack-plugin@3.2.0
在 webpack.config.js 中配置这两个插件.
const ExtractTextPlugin = require('extract-text-webpack-plugin') // css文件单独打包
const OptimizeCssplugin = require('optimize-css-assets-webpack-plugin') // 压缩css文件
放到rules 把之前第一个rules下的更改了.
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
//plugins:[ new ExtractTextPlugin('') //指定单独打包的css文件存储路径和名字 ]压缩完毕的
plugins:[
new htmlWebpackPlugin({
//生成的html文件 不用指定输出目录 因为出门文件已经设置
filename:"a.html",
//已经有的html
template:"./index.html"
}),
new webpack.optimize.UglifyJsPlugin(),
//单独打包 生成的路径的
new ExtractTextPlugin("style.css"),
//压缩
new OptimizeCssplugin()
]
step 3
webpack
成功的打包压缩了css文件
spritesmith 雪碧图
前端开发的过程中,会有很多的小图标.
一般这些小图片都是以 .png结尾的背景透明的图片.
这些小图标一般应用于一些按钮或者其他元素的图片.
比如有一个按钮,需要一个相机的小图标.
我们可能需要设置这样的 css 代码.
首先,一般这些小图片的大小都很小.
但不管有多小,都是一个http请求. background：url("./1.png")
如果页面上的需要用到小图标的地方很多.
比如有N个(假如是N张不同的小图片).
那么就会有N个请求小图标的http请求.
然而,浏览器的HTTP请求个数是有限制的.
这样做无疑会浪费HTTP请求资源.
常规做法
之前的前端会让美工把所有的小图标布局到一张图片中.
前端工程师,就根据这一张图片,来设置不同元素需要的背景图片.
这里主要是搭配 background-poistion:x,y 来设置.
具体的样式内容大概一般会是下面这个样子.
.icon-Snip20190227_108 {
background-image: url(../sprites/sprite.png);
background-position: 0px 0px;
width: 55px;
height: 55px;
}
.icon-Snip20190227_109 {
background-image: url(../sprites/sprite.png);
background-position: 0px -57px;
width: 69px;
height: 66px;
}
.icon-Snip20190227_112 {
background-image: url(../sprites/sprite.png);
background-position: 0px -125px;
width: 71px;
height: 66px;
}
.icon-Snip20190227_111 {
background-image: url(../sprites/sprite.png);
background-position: 0px -193px;
width: 67px;
height: 67px;
}
.icon-Snip20190227_110 {
background-image: url(../sprites/sprite.png);
background-position: 0px -262px;
width: 68px;
height: 68px;
}
.icon-Snip20190227_113 {
background-image: url(../sprites/sprite.png);
background-position: 0px -332px;
width: 66px;
height: 69px;
}
html中 使用
<div class="icon-Snip20190227_109"></div>
<div class="icon-Snip20190227_112"></div>
好处
图片资源只有一个,所以请求的 HTTP 只有一次.
即使第二个div的css中,又再次请求了一次
background-image: url(../sprites/sprite.png);
但实际上,这张图片已经被第一个div请求过来,
并被浏览器缓存了.所以,
第二个div背景图片资源实际上是来自浏览器缓存.
麻烦点
要事先和设计师沟通,把所有需要用到的小图标,
都集成在一张图片中.
我们需要拿到这张图片,利用 ps
等工具测量图标的大小,以及在整个图片中的 x,
y坐标.
最后,我们还需要为此编写一个特定的.css文件.
使用 webpack-spritesmith 插件
webpack-spritesmith 插件自动的把零散的小图标生成一张大图.(雪碧图)
(多个http请求变成一个)
webpack-spritesmith 插件自动测量大图的中每一个小图标的大小以及位置,
帮我们生成对应的 .css 文件.（css样式表）
(不用我们自己测量尺寸和位置以及编写.css文件)
step 1.
安装 webpack-spritesmith@1.0.0 插件
npm install webpack-spritesmith@1.0.0 --save-dev
step 2.
npm install webpack@3 --save-dev
step 3.
安装 html-wepack-plugin 插件
npm i --save-dev html-webpack-plugin@3.2.0
目的：提供 html-webpack-plugin 生成依照的模块文件index.template.html
step4.
在 webpack.config.js 中导入此插件,并设置一些此插件的相关配置.
使用 webpack-spritesmith 是帮助我们生成了一个.css文件,
而非我利用 import require 等方式导入文件.
所以 html-webpack-plugin 不会帮我们在生成的
index.html 文件里,自动导入这个样式文件.
所以,我们需要在给
html-webpack-plugin 插件提供的依赖模板中,
手动指定生成来的样式文件
所以需要设置一下 html-webpack-plugin 插件的 template 参数
//导入相关的模块
const WebpackHtmlPlugin = require('html-webpack-plugin')
const SpritesmithPlugin = require("webpack-spritesmith");
plugins: [
new SpritesmithPlugin({
//目标的小图片
src: {
//小图标的路径
cwd: path.resolve(__dirname, 'src/icons'),
//后缀名是png
glob: '*.png'
},
//生成文件的设置 生成两种东西 雪碧图 css
target: {
//生成雪碧图(大图的)文件存放路径
image: path.resolve(__dirname, 'dist/sprite/sprite.png'),
//生成的css路径
css: path.resolve(__dirname, 'dist/sprite/sprite.css')
},
//样式文件中 雪碧图的写法
apiOptions: {
cssImageRef: "./sprite.png"
},
//雪碧图生成的写法
spritesmithOptions:{
//如果排列及外边距
algorithm:"top-down",//从上到下 默认是横着的
padding:2//每个小图标之间的间隙
}
}),
//html-webpack-plugin
//自动生成html 并自动引用生成的css文件，以模板生成新的html
new WebpackHtmlPlugin({
//模板
template:"index.html",
//生成新的文件 所在路径
//注意：前边生成的雪碧图和css样式表 sprite
filename:"./sprite/a.html" //该路径参照根目录下模板index.html引入css的路径
})
]
现在开始使用
在根目录下的index.html中
<link rel="stylesheet" href="./sprite.css">
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
新建一个 src/app.js 作为 webpack 打包的路口文件.
在里面键入
document.getElementById('one').classList.add('icon-1')
document.getElementById('two').classList.add('icon-2')
document.getElementById('three').classList.add('icon-3')
运行
webpack
demo
|-src
|-app.js 入口文件
|-icons
|-1.png
|-2.png
|-dist
|-bundle.js
|-sprite
|-sprite.css 相应的css样式
|-sprite.png 雪碧图
|-a.html html-webpack-plguion生成的
|-index.html
|-webpack.config.js
|-package.json
|-package.lock.json
浙公网安备 33010602011771号