webpack基础教程

webpack

https://webpack.docschina.org/

webpack 是node的第三方模块包，用于打包代码

webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）

把很多文件打包整合到一起，缩小项目体积，提高加载速度

功能：

less/sass ------> css

ES6/7/8 -------->ES5

html/css/js------>压缩合并

基础使用

默认的入口文件 ./src/index.js 默认出口文件 ./dist/main.js

• 初始化包环境

  yarn init
  1

• 安装依赖包

  yarn add webpack webpack-cli -D
  1

• package.json配置scripts(自定义命令)

  "scripts": {
      "build": "webpack"
  },
  1
  2
  3

• 项目目录下新建 src/add/index.js

  export const addFn = (a, b) => a + b
  1

• 项目目录下新建 src/index.js

  import { addFn } from './add'
  console.log(addFn(4, 5))
  1
  2

• 项目目录下打开命令窗口，运行打包命令

  yarn build
  or
  npm run build
  1
  2
  3

  **总结：**打包命令执行后，在项目目录下生成默认的dist目录和打包后默认的main.js文件

• 代码变更，重新打包

  • 新建src/tool/index.js

    export const getArrSum = (arr) =>
      arr.reducw((sum, val) => {
        sum += val
      }, 0)
    
  1
  2
  3
  4
  5

  • 更改src/index.js代码

    import { addFn } from './add'
    import { getArrSum } from './tool'
    console.log(addFn(4, 5))
    console.log(getArrSum([1, 2, 3, 4]))
    console.log(addFn(5, 6))
  1
  2
  3
  4
  5

  • 运行打包命令

    yarn build
  1

  **总结：**打包后，代码压缩，变量压缩

webpack配置

如何指定webpack的入口和出口

• 项目目录下，新建webpack.config.js
• 填写配置项

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'build.js',
  },
}
1
2
3
4
5
6
7
8
9

打包隔行变色项目

• 前面的步骤

• 下载jquery，项目目录下新建public/index.html

• src/main.js

  import { addFn } from './add'
  import { getArrSum } from './tool'
  import $ from 'jquery'
  console.log(addFn(4, 5))
  console.log(getArrSum([1, 2, 3, 4]))
  console.log(addFn(5, 6))
  $(function () {
    $('#app li:nth-child(odd)').css('color', 'red')
    $('#app li:nth-child(even)').css('color', 'blue')
  })
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

• 执行打包命令

• 把public以及他的html文件复制到dist目录下

• 在index.html文件中手动引入打包后的build.js

自动生成html文件

webpack只能打包js文件，插件HtmlWebpackPlugin 简化了 HTML 文件的创建

该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle

• 安装

  npm install --save-dev html-webpack-plugin
  1

• webpack.config.js中配置

  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const path = require('path')
  
  module.exports = {
    entry: './src/main.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'build.js',
    },
    plugins: [new HtmlWebpackPlugin()],
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

  打包后，dist目录下就多了html文件，还自动把打包的bundle.js文件通过script引入

处理css文件–加载器

webpack 默认只认识js文件和json文件

• src/css/index.css给body添加背景颜色
• 把css文件引入到入口文件 被webpack打包
• loader加载器，让webpack处理其他类型的文件，打包到js中

下载

npm install --save-dev style-loader css-loader
1

webpack配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
entry: './src/main.js',
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'build.js',
},
plugins: [new HtmlWebpackPlugin()],
module: {
  rules: [
    //loader的规则
    {
      test: /\.css$/i, //匹配所有的css文件
      // use数组中从右往左运行
      // 先用css-loader让webpack识别css文件的内容打包
      // style-loader 把css插入到dom中
      use: ['style-loader', 'css-loader'],
    },
  ],
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

处理less文件

安装

npm install less less-loader --save-dev
1

webpac配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
entry: './src/main.js',
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'build.js',
},
plugins: [new HtmlWebpackPlugin({
    // 以此为标准 生成打包后的html文件
    template: './public/index.html',
  })],
module: {
  rules: [
    //loader的规则
    {
      test: /\.css$/i, //匹配所有的css文件
      // use数组中从右往左运行
      // 先用css-loader让webpack识别css文件的内容打包
      // style-loader 把css插入到dom中
      use: ['style-loader', 'css-loader'],
    },
    {
      test: /\.less$/i, //匹配所有的less文件
      use: [
        // 从右往左运行
        // compiles Less to CSS
        // less-loader让webpack处理less文件，会用less翻译less代码转换成css代码
        'style-loader',
        'css-loader',
        'less-loader',
      ],
    },
  ],
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

src目录下新建less/index.less

入口main.js中引入less文件

打包

从yarn build开始，都走了哪些流程

执行webpack命令，找到配置文件，入口和依赖关系，打包代码输出到指定位置

处理图片文件

webpack无法自己处理图片文件

webpack5使用asset module技术来实现字体文件和图片文件的处理，无需配置额外的loader

https://webpack.docschina.org/guides/asset-modules/

1：webpack5.在rules里，针对图片文件设置type:asset

2:小于8kb转base64字符串进js里，大于8kb直接输出文件

• 在src/assets准备图片文件
• 在less/aa.less文件中对body设置背景图片
• 在入口导入图片文件，设置到img标签插入到body
• 打包

module:{
    rules:[
           {
        // 图片文件的配置  (仅适用于webpack5版本)
        test: /\.(gif|png|jpg|jpeg)/,
        type: 'asset', //匹配上面的文件后，webpack会把他们当静态资源处理打包
        // 如果你设置的asset模式  以8kb来区分图片文件
        // 小于8kb的 把图片文件转base64，打包到js中
        // 大于8kb的，直接把图片文件输出到dist下
      },
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12

为什么8kb上下的图片要区分呢

图片翻译成base64打包到js文件中

好处：浏览器不用法请求了，直接可以读取，速度快

坏处：图片太大，再转base64就会让图片的体积增大30%左右，得不偿失

处理字体图标

• src/assets中放入fonts字体相关的文件夹

• src/main.js引入assets/font/iconfont.css

• src/main.js创建一个i标签，把字体图标标签添加到body上

• 添加针对字体文件的加载器规则，使用asset/resource （直接输出文件并配置路径）

• 打包

  module:{
    rules:[
         {
        test: /\.(ttf|eot|svg|woff|woff2)/,
        type: 'asset/resource',
        generator: {
          // 生成文件的文字  定义规则
          filename: 'fonts/[name].[hash:6][ext]', //[ext] 会替换成.eot/.woff
        },
      },
    ]
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

webpack对js语法降级

babel https://www.babeljs.cn/

babel-loader https://v4.webpack.js.org/loaders/babel-loader/

babel一个JavaScript编译器，把高版本js语法降级处理输出兼容的低版本语法

babel-loader 让webpack编译打包js代码

步骤：

• src/main.js 定义箭头函数，打印箭头函数变量（不要调用，为 了让webpack打包函数，看降级效果）

• 下载加载器

  npm install -D babel-loader @babel/core @babel/preset-env webpack
  1

• webpack配置

• 打包

 {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, //不去匹配这些文件夹下的文件
        use: {
          loader: 'babel-loader', //使用这个loader处理js文件
          options: {
            //加载器选项
            presets: ['@babel/preset-env'], // @babel/preset-env 降级规则  按照这里的规则降级我们的js语法
          },
        },
      },
1
2
3
4
5
6
7
8
9
10
11

webpack开发服务器

问题：每次修改完代码，重新yarn build打包，才能看到最新效果，实际工作中，打包yarn build非常耗时

为什么：

• 从0构建依赖
• 磁盘读取对应的文件到内存，webpack开始加载
• 再用对应的loader进行处理
• 将处理完的内容，输出到磁盘指定目录

解决：

起一个开发服务器，缓存一些已经打包过的内容，只重新打包修改的文件，最终运行在内存中给浏览器使用

打包在内存中，速度快

自动更新打包变化的代码，实时返回给浏览器显示

使用

webpack-dev-server

https://webpack.docschina.org/api/webpack-dev-server/#root

• 下载

npm install --save-dev webpack-dev-server
1

• 自定义webpack开发服务器启动命令serve 在package.json里

   "scripts": {
      "build": "webpack",
      "serve": "webpack serve"
    },
  1
  2
  3
  4

• 启动服务器

  yarn serve
  1

  webpack-dev-server 会给我们一个地址+端口号 ，浏览器中访问就可以看到打包的index.html页面

修改端口号

webpack.config.js中修改端口号，重新启动项目

module.exports = {
 mode: 'development', 
  devServer: {
    port: 3000,
  },
 }
1
2
3
4
5
6