Webpack基础

Webpack 基础

Webpack

参考：

介绍

模块打包(构造)工具，解决模块间的依赖关系。还可以配置各种功能（开发者服务等)

  • bundle(捆绑) images
  • bundle styles
  • bundle assets
  • bundle script

webpack  依赖 node 环境

node 环境提供为了可以正常的执行很多代码。必须其中包含各种依赖的包。

主要就是 npm 工具（node packages manager）

vue-cli 中也内置了 webpack

  • npm run build (生产打包)
  • npm run dev （开发打包）

为什么用 Webpack

1.打包

  • 解决文件的依赖

_        - 减少 http 的请求次数_

_        - 文件变小_

2.可以进行转化

  • 通过各种 loader 把浏览器不认识的转化成认识的

3.前端的优化

  • 代码的压缩，图片的压缩

4.构建开发服务器

webpack 和 gulp 有有什么区别

**    相同：**

**    **** **   1.都可以对文件进行压缩合并

2.转化不认识的语言

3.都可以创建前端服务器

**    不同：**

**        定位不同**

**    ****    ****   ** glup 帮助构建自动化的项目，注重的是开发流程

webpack 注重的模块之间的依赖

什么时候用 webpack

做 spa 项目(单页面)用 webpack

不模块化，不单页面就用 glup

安装  webpack

**  ** 路径一定不能有中文，且项目名不能为 webpack

打包项目的准备工作,  初始化：

1
2
3
4
5
npm init -y
npm i webpack webpack-cli -g 全局安装
npm i -D webpack webpack-cli
// 检查是否安装
webpack -v

目录下需要有个 src 文件夹

1
2
3
4
5
entry: './src/index.js' // 打包前, 入口
output:{ // 打包后，出口
  path:path.resolve(__dirname,'dist'),
  filename: "index.js"
}

webpack 的配置文件 => webpack.config.js

mode: development 开发环境，production  生产环境

**development： **打包出来有识别性，方便调试，还有开发服务器。

**production： **为上线做准备，tree-shaking，压缩图片和代码体积。

loader 转换器

Loader 就是将 Webpack 不认识的内容转化为认识的内容，webpack 默认只认识 Js。

基本配置展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module:{//各种loader  转换器
  //规则  打包编译的规则
  rules:[
    //loader使用顺序，从右到左(就是不换行写)，从下向上
    {
      test:/\.css$/,  //正则匹配css文件
      use:[
        'style-loader', //在head标签内创建<style>,在把js中css放在style里面
        'css-loader' //从下到上，从右到左。将css文件变成css加载到js中，
      ]
    },
    {
      test: /\.less$/,  // 反斜杠就是转译
      use: [
        //less的编译，需要安装less 和 less-loader >npm i -D less less-loader
        'style-loader', 'css-loader', 'less-loader'  //less的编译  需要安装less 和 less-loader
      ]
    },
    plugins:[ ], //插件
  devServer: { //开发服务器配置
  }

Style-loader

在 head 标签内创建<style>,在把 js 中 css 放在 style 里面

CSS use 顺序

在 rules 的 use 中，最后的应该是 less/sass 等需要编译的 css。然后再是 postcss,  添加前缀，后面才打包 css, 再把 css 放到 style 标签中等..

use: [ ‘style-loader’, ‘css-loader’, ‘postcss-loader’, ‘sass-loader‘, ]

CSS 兼容

使用 postcss-loader，自动添加 CSS3 部分属性的浏览器前缀

npm install postcss postcss-loader postcss-preset-env -D

给 css 样式添加不同浏览器的前缀，解决兼容问题。

创建 postcss 配置文件 postcss.config.js

1
2
3
4
// postcss.config.js
module.exports = {
  plugins: [require("postcss-preset-env")],
};

创建 postcss-preset-env 配置文件 .browserslistrc

1
2
3
4
# 换行相当于 and
last 2 versions # 回退两个浏览器版本
> 0.5% # 全球超过0.5%人使用的浏览器，可以通过 caniuse.com 查看不同浏览器不同版本占有率
IE 10 # 兼容IE 10

Sass/Less 兼容

$ npm install sass-loader -D

淘宝镜像

$ npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

1
2
3
webpack.config.js => config.rules
test: /\.(s[ac]|c)ss$/i, //匹配所有的 sass/scss/css 文件
use: [ 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader', ]

less => npm i -D less less-loader

资源(图片,字体等) 打包

webpack5 已经放弃使用 url-loader 和 file-loader， 直接用内置的 assets

还是要使用 file-loader/url-loader 要这样配置：

–

1
2
3
4
5
6
7
8
9
{
  test: /\.(jpe?g|png|gif)$/i
  loader: 'file-loader',
    type: 'javascript/auto',
      options: {
        esModule: false,  //解决html区域,vue模板引入图片路径问题
          name: '[name][hash:8].[ext]'
      }
},

html 图片 css 图片   分别配置   分别安装。

安装

npm i -D url-loader file-loader html-loader

css 中引入的 url： 图片字体等

1
2
3
4
5
6
7
8
{
  test:/\.(jpg|png|jpeg|git)$/,
    loader:'url-loader',
      options:{
        limit:10*1024,  //10kb以下的编译成base64编码，大于则拷贝文件
          name:'[hash:10].[ext]'
      }
},

处理引入(import) 的图片资源

1
2
3
4
{
  test: /\.(jpe?g|png|gif)$/i, // 匹配图片文件
  use: ['file-loader']
},

先用 html-loader 拿到路径，再到 url-loader。 **–处理 html 的图片资源**

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

asset module 打包文件

webpack5 新增资源模块(asset module)，允许使用资源文件（字体，图标等）而无需配置额外的 loader。

  • asset/resource 将资源分割为单独的文件，并导出 url，类似之前的 file-loader 的功能.
  • asset/inline 将资源导出为 dataUrl(base64) 的形式，类似之前的 url-loader 的小于 limit 参数时功能.
  • asset/source 将资源导出为源码（source code）. 类似的 raw-loader 功能.
  • asset 会根据文件大小来选择使用哪种类型，当文件小于 8 KB（默认） 的时候会使用 asset/inline，否则会使用 asset/resource
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  test: /\.(jpe?g|png|gif)$/i,
  type: 'asset',
  generator: {
    // 输出文件位置以及文件名
    // [ext] 自带 “.” ,与 url-loader 配置不同
    filename: "[name][hash:5][ext]"
  },
  parser: {
    dataUrlCondition:{
      maxSize: 50 * 1024 // 超过50kb就不转 base64
    }
  }
},

打包其他文件

打包其他资源，写在最后

1
2
3
4
5
6
7
{
  exclude:/\.(html|css|js|less|jpg|png|gif|jpeg)$/, //排除其他文件
  loader:'file-loader',
  options:{
    name:'[hash:10].[ext]]'
  }
}

Plugin 插件

与 Loader 用于转换特定类型的文件不同，插件（Plugin）可以贯穿 Webpack 打包的生命周期，执行不同的任务

html 插件

帮你自动生成 html：比如把打包后的 js,css 等资源，用标签在 html 中引入

需要安装 npm i -D html-webpack-plugin

这是一个插件   所有需要在 plugins 中使用。且要先引入（require）

clean 插件

cnpm i -D clean-webpack-plugin

–引入 clean 插件 打包时会先清空 dist 文件夹，再重新添加

–直接在 plugin 中使用，不用配置

合并 css

不再使用 style-loader, 使用MiniCssExtractPlugin, 可以使多个 style 标签整合为一个 css 文件，再通过 link 标签在 html 中引入。

npm i -D mini-css-extract-plugin

开发者服务器 （实时更新编译）

npm i -D webpack-dev-server

npm webpack-dev-server

**   **** nodejs 实现的**

  • 是缓存于内存中的，而非映射到硬盘中，因为内存的读取速度吊打硬盘
  • 测试都是基于内存的
  • 只有再次执行 npm run build 。才会把内存中对应的数据输入到磁盘中去。

配置：

当版本  webpack-dev-server 的  version >= 4.0.0 时，需要使用 devServer.static 进行配置，不再有 devServer.contentBase 配置项。

为什么要配置 contentBase/static ？

webpack 打包的时候，对静态文件都是复制的，这消耗资源，太费时。而配置 contentBase/static 后，就直接到对应的静态文件目录下去取。大大提升了性能

–在 package.json 中配置 启动方式

–npm strat 就可以启动了。

<vue 脚手架的启动命令   其实就是执行这个 webpack 的命令>

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！