Webpack 打包工具全析

编程语言 2019-02-27 16:30:51 阅读次数: 0

Webpack

概念 ==> webpack 是什么?? 前端模块化打包(构建)工具

webpack 的两个方面

1 - 打包 2 - 模块化

打包 : 前端打包(构建)都能做什么??

  1. 语法转换

    - Less/SASS 预编译CSS -> CSS -> 浏览器中使用
- ES6 新语法有兼容性问题 -> ES5 -> 浏览器中使用
- const fn = () => {} ===> var fn = function() {}

  2. 文件压缩、合并

    JS/HTML/CSS 压缩后，才能发布上线
文件合并（ 不管有多个JS、CSS，默认打包直接生成一个JS文件 ）

  3. 开发期间提供一个服务器环境

     自动打开浏览器、监视文件变化，自动刷新浏览器

  4. 项目上线,打包后才能上线

  5. 总结

     webpack 这个打包（构建）工具，就是提供了前端开发需要的一整套完整的流程，也就是
 webpack 能够渗透的前端开发的各个环节、各个流程中，帮你实现 复杂、繁琐、重复的工作，有了 webpack 后，开发人员只需要关注当前要实现的业务即可。

模块化功能

  • webpack 基于 node

  • 模块化 : 逻辑

  • 组件化 : 界面

  • webpack为前端提供了模块化开发环境，有了webpack，就可以像写Node代码一样，写前端代码了

  • 在 webpack 看来所有的资源都是模块，不管是： CSS、图片、字体、JS、html 等

  • 在webpack提供的模块化环境中，
1 想要加载一个JS文件，只需要 require('./a.js')
2 想要加载一个CSS文件，只需要 require('../css/index.css')
3 想要加载一个图片文件，只需要 require('../iamges/a.png')
4 ...

Webpack 四个核心概念：

入口(entry)、出口(output)、加载器(loader)、插件(plugins)

  • 入口 : 要打包哪个文件

  • 出口 : 要打包到哪里

  • 加载器 : 加载除了js文件其他文件的功能

  • 插件 : 处理加载器完成不了的功能, 使用插件

 

webpack 使用步骤

webpack 第一阶段 命名初始化阶段

文件名不能有汉字,不能取名叫 webpack

  1. 生成 package.json, 命令 : npm init -y

  2. 安装 : npm i -D webpack webpack-cli

webpack  : 是 webpack 工具的核心包
webpack-cli : 提供了一些在终端中使用的命令
-D(--save-dev) : 表示项目开发期间的依赖,也就是 : 线上代码中用不到这些包了
​
npm i vue       上线也会用到的包
npm i webpack -D 开发阶段使用的包  (-D --save-dev  development(开发))

  1. 在 package.json的scripts中,添加脚本

 "scripts": {
    "build": "webpack main.js"
  },
// webpack 是webpack-cli 中提供的命令, 用来实现打包的
// ./main.js 入口文件,要打包哪个文件

  1. 创建一个main.js文件

console.log('webpack 的入口文件被打包了')

  1. 运行 : npm run build

  2. 设置开发状态 : mode

"build" : "webpack ./main.js --mode development"
​
// WARNING in configuration
// The 'mode' option has not been set, webpack will fallback to 'production' for this value.
// 如果没有设置 mode 配置项, webpack 会默认提供 开发环境(production)
​
// Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
// 项目开发的两种环境
  1. 开发环境 (development) : 开发过程就是开发环境
  2. 生产环境 (production) : 线上环境, 也就是 : 项目做好了,发布上线
  生产环境下, 打包生产的js文件都是压缩后的,  开发环境下代码一般是不压缩的

webpack 第一阶段 隔行变色案例

  1. 创建 src/index.html

  2. 隔行案例 => html => ul#list>li{我是 li \$}\*10

  3. 安装 juqery : npm i jquery, 并且引入 jquery

  4. 暂时引入 main.js , 在 main.js 里写入

// 使用ES6的模块化语法
import $ from 'jquery' // 优点 不用沿着路径去找
​
$('#list > li:odd').css('backgroundColor', 'red')
$('#list > li:even').css('backgroundColor', 'green')
// 语法报错

问题 :

// 引入 main.js 会报错,因为浏览器不支持这个import 的Es6语法
// npm run build 之后
//  引入 dist/main.js 后会ok,因为webpack 帮我们转化为浏览器能够识别的es5语法了

历程 :

//1. 如果index.html 中引入 jquery , 再引入 mian.js  => ok
//2. 如果index.html 中没有引入 jquery , 直接使用es6的模块化语法 import , 引入main.js就会报错
//3. 如果index.html 中没有引入 jquery , 直接使用es6的模块化语法 import , webapck打包出 dist/main.js 引入 dist/main.js  ==> ok

webpack 第二阶段 webpack 配置文件-初级阶段

  1. 准备工作 : src源文件 : index.html和main.js

  2. webpack 打包有两种方式

    1-命令行 2-配置项

  3. 方式 1 : 命令行

*    "build"  : "webpack ./mian.js" --mode development
*     npm run build
*   一般情况下 : 改为
*     "build" : 入口  --output 出口
*     "build": "webpack ./src/js/main.js --output ./dist/bundle.js  --mode development",
*
*     验证 : index.html 引入 bundle.js

  1. 方式 2 : 配置文件

第一步 : 项目`根目录`下, 创建一个 `webpack.config.js`文件 (文件名固定死)
         专门指定其他文件 : --config  webpack.XX.js
第二步 : 在 `webpack.config.js` 中,进行配置
// webpack 是基于 node的 , 所以配置文件符合 node 方式书写配置
// 注意 : 不要再这个文件中使用ES6的的模块化 import语法
// main.js里可以使用,是因为要通过webpack转化为es5的
// 而这个是webpack 的配置文件,,它是要转化别人的,所以必须要通过
第三步 : 修改 `package.json` 中的 `scripts` , 脚本命令为： "build": "webpack"
第四步 : 执行命令 : `npm run build`

  1. 示例代码(webpack.config.js) :

const path = require('path')
​
module.exports = {
  // 入口
  entry: path.join(__dirname, './src/js/main.js'),
  // 出口
  output: {
    // 出口目录
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  // 开发模式
  mode: 'development'
}

webpack 第二阶段 webpack 配置文件 : webpack-dev-server (最绕)

  1. webpack-dev-server 使用 webpack 必备的功能(插件)

作用 : 为使用 webpack 打包提供一个服务器环境

  • 1.1 自动为我们的项目创建一个服务器

  • 1.2 自动打开浏览器

  • 1.3 自动监视文件变化,自动刷新浏览器...

  1. 使用步骤 :

  • 2.1 安装 : npm i -D webpack-dev-server

  • 2.2 两种使用方式: 1-命令行 2-配置文件(推荐)

  1. 方式 1 : 命令行配置

  • 脚本 : "dev" : "webpack-dev-server"

  • 运行到 npm run dev

  • 查看路径 : "http://localhost:8080/"

  • ｢wds｣: Project is running at http://localhost:8080/

  • 问题 1 : 显示的只是一些列表 => 只有进入 src 才可以显示页面

  • 解决 : 想要查看直接进入 src 文件 : 添加 --contentBase src

  • 问题 2 : 没有了颜色 也就是说样式失效了

    • ｢wds｣: webpack output is served from /

  • 解决 : <script src="/bundle.js"></script>

  • 问题 3 : 自动打开?

  • 解决 : 添加 --open

  • 问题 4 : 指定端口号

  • 解决 : 添加 --port 3001

  • 问题 5 : 热更新

  1. 方式 2 : 配置文件配置

// hot 不要写在配置文件里面,,不然的话还要配其他插件麻烦
 "dev" : "webpack-dev-server --hot",
​
  devServer : {
    open : true,
    contentBase : path.join(__dirname,'./src'),
    port : 3001
  }

webpack 第二阶段 webpack 配置文件 html-webpack-plugin

  1. html-webpack-plugin 必备的插件

作用 :
  1. 能够自动引入js文件
  2. 能够根据指定的模板文件 (index.html),在内存中生成一个新的 index.html,并且在浏览器中打开的页面,就是该插件在内存中生成的页面
  // contentBase : path.join(__dirname,'./src'),  dev-server 中的这个也就无效了, 因为会自动打开index.html页面,不需要自己指定了

  1. 安装 : npm i html-webpack-plugin -D

  2. 配置 :

第一步: 引入模块
const htmlWebpackPlugin = require('html-webpack-plugin')
第二步: 配置
// 插件
plugins: [
  // 使用插件 指定模板
  new htmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html')
  })
]

webpack 第三阶段 项目打包上线的说明

  1. 开发模式 : npm run dev

  2. 假设项目开发完成了,要上线,怎么操作?

2.1 执行 : `npm run build` 对项目进行打包,生成dist文件
2.2 模拟本地服务器 : 安装 : `npm i -g http-server`
2.3 把dist文件里的内容放到服务器里即可, 直接运行`http-server`

webpack 第四阶段 : 打包非js文件

webpack 只能处理 js 文件,非 js(css.less.图片.字体等)处理处理不了, 借助 loader 加载器

webpack 第四阶段 1 : 处理 css 文件

  1. 创建一个 css 文件, 然后在 main.js中引入 import '../css/index.css';

    ul { style-list : none }

  2. 安装 : npm i -D style-loader css-loader

  3. 在 webpack.config.js 中,添加个新的配置项 module

  4. 在 module 中添加 loader 来处理 css

// loader
module: {
  rules: [
    //1.处理 css
      // 注意点 use执行loader 顺序 从右往左
      // css-loader  :  读取css文件内容,将其转化为一个模块
      // style-loader :拿到模块, 创建一个style标签,插入页面中
    { test: /\.css$/, use: ['style-loader', 'css-loader'] }
  ]
}

webpack 第四阶段 2 : 处理 less 文件

  1. 创建一个 less 文件, 然后再 main.js 中 引入 import '../css/index.less';

  2. 安装 : npm i -D less-loader less style-loader css-loader

  3. 在 webpack.config.js 中, 配置 module->rules

  4. 在 module 中, 添加 loader 来处理 less

ul {
  background-color: aqua;
  li {
    &:hover {
      color: yellow;
    }
  }
}

配置 :

 { test :/\.less$/, use : ['style-loader','css-loader','less-loader'] },

webpack 第四阶段 3 : 处理 图片 文件

<div class='cls1'></div>设置背景图片

  1. 安装 : npm i -D url-loader file-loader

    url-loader (推荐) 和 file-loader 二选一即可

  2. 在 webpack.config.js 添加 loader 规则

// 处理图片
  { test : /\.(jpg|png)$/, use : ['url-loader'] },

  1. url-loader 默认会将图片转化为 base64 编码格式, 目的:提高性能

  2. file-loader 在车里图片时, 会对文件进行重命名 :

原始：    background-image: url(../images/1.jpg);
处理后：  background-image: url(9c9690b56876ea9b4d092c0baef31bb3.jpg);

  1. base64 编码格式的图片说明 :

  • 精灵图 : 将一些小图片合并为一张图片,减少请求次数,提高性能

  • 字体图标 :直接将一些小的图片,合并到字体文件中,并且不会失真

  • base64 : 是一种编码格式,能够将图片、文字等常见的文件,转化为 base64 格式,这种字符串格式, 浏览器能够识别并且读取显示到页面中;

  • base64 是一个字符串,也可以直接被内嵌到页面中, 或者 css 中

  • 注意 : 大图片不适合用 base64 处理, 只有小的图标才适合 base64 处理

  1. 设置配置

 {
        test: /\.(jpg|png)$/, use: [
          {
            loader: 'url-loader',
            options: {
              //  比这个小 => 转化为base64
              //  大于等于这个值 => 不会转base64 内部调用 file-loader 加载图片
              limit: 57417
            }
          }
        ]
      },

webpack 第四阶段 4 : 处理 字体 图标

  1. 准备字体图标: 字体图标文件 iconfont 或者 从阿里矢量图标里下载

  2. 拷贝到项目中的 css 文件夹中

  3. 在 main.js 中引入 css 文件

    import '../css/iconfont/iconfont.css'

  4. 使用 : <i class="iconfont icon-zan"></i>

  5. 在 webpack.config.js 中配置

 // 4. 处理字体图标
  { test:/\.(svg|woff|woff2|ttf|eot)$/,use:'url-loader'}

webpack 第四阶段 5 : 处理 ES6 语法

  1. 现在的项目都是使用 ES6 开发的, 但是这些新的 ES6 语法, 并不是所有的浏览器都支持, 所以就需要有一个工具,帮我们转成 es5 语法, 这个就是: babel

  2. babel

  3. Babel is a JavaScript compiler. ==> babel 是一个 JavaScript 编译器

  4. webpack 只能处理 import / export 这个 es6 模块化语法而其他的 js 新语法,应该使用 babel 来处理

  5. 比如 : var o = { ...obj } 在谷歌上可以,edge 就不可以

  6. babel 的使用 :

  • 6.1 安装 1 : npm i -D babel-core babel-loader@7

    • babel-core 是 babel 的核心包

    • babel-loader 加载 js 文件, 并将 js 代码内容交给 babel-core 解析为 es5 低版本的 js

  • 6.2 安装 2 : npm i -D babel-preset-env babel-preset-stage-2

    • babel-preset-* 表示能够解析什么版本的 js 语法

    • babel-preset-env : 表示能够解析 es2015,es2016,es2017,es2018 这些标准的语法

    • babel-preset-stage-2 : 用来解析经过会遇到,但是还没有被采纳为标准的语法

    • 比如 : 'abc'.padStart(10, '6') : 准备 10 位字符,有 abc,前面不够用 6 补充,是 es2017 的语法,

    • babel-polyfill与babel-plugin-transform-runtime 也是做兼容处理的,以前都是用这个,兼容更早的

  • 6.3 配置 : 在 webpack.config.js 中添加一个 loader

  { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

  • 6.4 在项目根目录中创建 babel 的配置文件，叫：.babelrc

  {
  "presets": [
    "env",
    "stage-2"
  ],
​
  -----------
  // 暂时不用
  // 如果未来某一天真的用到了polify
    "plugins": [
        ["transform-runtime", {
                "helpers": false,
                "polyfill": true,
                "regenerator": true,
                "moduleName": "babel-runtime"
    }]  

猜你喜欢

转载自blog.csdn.net/weixin_44137393/article/details/87970014
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022