webpack的使用

2019-01-04  本文已影响0人  cj_jax

认识webpack

什么是webpack

​ webpack是一个前端的模块化打包(构建)的工具

功能：
​- 1.打包(构建)
​- 2.模块化

特点
​ webpack将一切繁杂的、重复的、机械的工作自动处理，开发者只需要关注于功能的实现的

打包(构建)

​- 1.语法转换

​ ES6--->ES5 供浏览器的解析

​ less/sass---->css 供浏览器的解析

​ TS------> ES5 供浏览器的解析

​- 2.文件压缩和合并

​ js / html /css 文件压缩，删除所有的注释和空格，变量名简写

​ js / css 文件合并 ，将多个js文件或则css文件合并成一个js文件或则css文件

​- 3.提供开发期间的服务器

​ 能够自动打开浏览器，监听文件变化，自动刷新浏览器的

模块化

​ 在webpack中，所有的资源都是模块

webpack 为前端提供了模块化开发环境，有了webpack之后，我们可以像写 NodeJS 代码一样，写前端代码。
​ 引入 js/css/图片 文件：

const Vue = require('vue')

require('./css/index.css')

require('./imgs/a.png')

​ 每个js文件都是一个独立的模块，模块之间的作用域是隔离的，需要通过导入和导出 来实现两个模块之前的数据共享
​webpack 能够识别现在前端所有的模块化语法，也就是说：不管你用的
require.js（AMD）、NodeJS（CommonJS）、ES6（import/export） 哪种语法，webpack全都认识，全都可以解析
​ webpack 不仅实现 JS 的模块化，也实现了 CSS、图片、视频 等所有前端资源，全部都可以使用模块化的方式来处理。

// CSS：
@import './common/base.css';

// CSS:
background-img: url(./imgs/a.png);

// HTML:
<img src="./imgs/a.png" />

注意点：
​ webpack 自身没有提供新的模块化语法，但是，它能够处理所有的前端模块化语法

使用webpack

初始化package.json

build 表示构建、打包
webpack 入口文件路径 --output 出口文件路径

"scripts": {
  "build": "webpack ./src/js/main.js --output ./dist/bundle.js"
},

实现依赖项加载的原理：
​ 采用的是递归的查询的方式，查找依赖项，找完所有的依赖项，然后将依赖项全部打包合并到一个文件中

打包执行的过程

问题

1.为什么 webpack 打包后，就可以在浏览器中运行了？？？
​ 答：webpack 能够识别和处理所有的 模块化 语法，能够将这些模块化语法，转化为浏览器能够执行的代码

webpack中的两个环境

(开发环境)development

​作用
​ 开发期间的环境，在项目没有上线之前使用，代码不会压缩
​配置
​ "build"："webpack ./src/js/main.js --output ./dist/bundle.js --mode development"
​特点
​ 打包的文件是未压缩的

(生产环境)production

​ 作用

​ 项目上线的时候使用，将代码打包压缩

​ 配置

"pro"："webpack ./src/js/main.js --output ./dist/bundle.js --mode production"

​ 特点

​ 打包的文件是压缩的

​ 使用的场景

​ 开发期间 npm run build

上线时 npm run pro

webpack命令行的简写

简写语法
"build"："webpack 入口文件路径 --mode 模式"
实例
"build"："webpack ./src/js/main.js --mode development"
"pro"："webpack ./src/js/main.js --mode production"

使用的命令
开发期间 命令：npm run build
上线打包 命令：npm run pro

注意点
简写模式中没有指定出口路径，服务器会默认在根目录下创建一个dist目录，存放的文件名称，和入口问文件名相同

webpack的配置文件的使用

什么叫配置文件

功能
这个文件将所有的配置项导出，webpack会读取这个配置文件，根据配置文件中的配置项，执行相应的操作
使用的步骤

webpack.config.js的基本配置项

webpack-dev-server

使用的步骤

在package.json配置项

  "dev"："webpack-dev-server  --open  --contentBase ./src  --port  3000 --hot"

配置项说明

--open
  打开浏览器
--contentBase
  默认打开的目录
--port
  打开的端口号
--hot
  热更新

使用的命令

 npm run dev
webpack-dev-server的配置文件的使用
**作用**
  提供了开发期间的运行服务器的环境
使用的步骤 -webpack.config.js配置文件的配置项
配置项说明
  devServer
    dev-server配置
  open
    自动打开浏览器
  contentBase
    默认打开的目录
  port
    打开的端口号
  hot
    热更新
  使用的命令
    npm run dev
webpack-dev-server 做了什么？
webpack和webpack-dev-server的区别
注意点
缓存的打包的文件和入口的文件名相同

应用场景
开发期间使用webpack-dev-server，上线打包使用webpack

html-webpack-plugin插件的使用

作用

为什么能够自动引入js/css等文件？

首先在配置项中设置了模板文件，webpack默认可以处理js的引入的，所以讲所有的引入和依赖项全都写在了main.js中，当webpack，使用模块化引入，就可以将js/css/image等文件全部打包放在了一起，然后webpack默认的又引入了这个js文件，所以到了不需要手动引入

html-webpack-plugin使用的步骤

loader的使用

打包处理非静态资源

webpack.config.js的配置项

 module{
   rules:[
     {test:正则匹配项，use:[‘使用的loader1’,‘使用的loader2’,    ...]  },
     {test:正则匹配项，use:[‘使用的loader1’,‘使用的loader2’,    ...]  },
   ]
 }

非静态资源注意点

webpack处理静态文件（例如css）的过程

css-loader

css-loader 使用的步骤
- 1.下载安装
  npm i -D style-loader css-loader
- 2.在 webpack.config.js 中，添加配置项来打包处理 CSS 文件
  
  正则的匹配项
      /\.css$/
  使用的loader
      ['style-loader','css-loader']
  配置项
      {test:'/\.css/',use:['style-loader','css-loader']}
  loader的说明
    css-loader
      读取css文件的内容，然后将读取的内容转化为一个模块
    style-loader
      读取css-loader的模块，在html的head标签中，创建一个style标签，然后将模块的内容放到这个style标签中

less-loader

  正则的匹配项
    /\.less$/
  使用的loader
    ['style-loader','css-loader','less-loader']
  配置项
    {test:'/\.css/',use:['style-loader','css-loader','less-loader']}
  loader的说明
  less-loader
    将less的内容转成编译后的css文件内容

url-loader/file-loader

url-loader
    正则的匹配项
      /\.(jpg|jpeg|png|gif)$/
    使用的loader
      'url-loader'
    配置项
{
  test:/\.(jpg|jpeg|png|gif)$/
  use:{
    loader: 'url-loader',
    options:{
      limit:8106
    }
  }
}

配置项的说明
loader
使用的模块
options
配置规则
limit字节数
file-loader
配置项
{test:/\.(png|jpg|jpeg|gif)$/,use:"file-loader"}
file-loader注意点
两个问题

将文件转成base.64格式的数据能够将不同类型的格式的数据，嵌入到js文件中，打包的时候，能够将引入的图片放到js中。

使用了MD5的特征码提取，一个文件只要内容没有发生改变，MD5的特征码始终唯一且不会改变

一般用于小图片的转换，如果一个图片文件过于庞大，无异于增加了js的大小
MD5适用于一个页面多次用到相同的图片，可能名称不同，但只需要发送一次请求图片。

细节补充

mode 配置项没有指定， webpack 默认将 mode 设置为 production

打包字体

配置项

   {test：‘/\.(eot|svg|ttf|woff|woff2|otf)$/’,use('url-loader')}

打包字体使用的步骤

处理ES6以及其他的js语法

使用的背景条件

默认情况下，只能打包处理 JS 这一类的静态资源

babel的作用
babel的使用步骤
上一篇下一篇

猜你喜欢

热点阅读