webpack入门

image.png(from https://webpack.docschina.org/)

1. 简述

webpack工具底层是基于node.js, 所以在开始之前确保本地已安装了node.js

2. webpack安装及配置

2.1 安装

npm init -y
npm install webpack webpack-cli --save-dev

安装成功之后, 可以通过下面的命令检查一下版本

./node_modules/.bin/webpack -v

image.png

2.2 配置

在根目录下面新建一个webpack.config.js文件

'use strict'

const path = require('path');
module.exports = {
  entry: {
    index: './src/index.js',
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js',
  },
  mode: 'production',
}

说明:

• entry: 打包入口;
• path: 打包后文件存放的文件位置;
• filename: 打包压缩生成的文件名;
• mode: 开发环境
• __dirname: node.js中的一个全局变量，它指向当前执行脚本所在的目录

2.3 打包

在package.json文件中添加如下build命令, 如下

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
}

此时当我们在控制台输入npm run build就会将src/index.js文件进行打包, 在根目录生成一个dist文件夹, 下面有一个名为index.js的文件

image.png

然而这个时候我们页面并不能看到实际的效果, 现在试着写点内容

• src/index.js
  [图片上传失败...(image-c2923e-1629124001152)]
• 重新打包 npm run build
• 在dist文件下新建一个index.html文件, 引入打包后的index.js, 内容如下

image.png

• 在浏览器中打开index.html文件, 展示如下

image.png

3. webpack解析

3.1 解析es6

• 在src文件下新建一个test.js, 内容如下

image.png

• 在index.js文件中引用, 如下
  image.png

-这时候, 我们再重新打包一下试一下

我分别在IE和Chrome两个浏览器打开了index.html文件, 结果却是截然不同的; 这是因为import, 箭头函数, 模板字符串都是ES6语法, 浏览器可以解析原生JS, 但是部分浏览器是解析不了ES6语法

IE Chrome

这时候就需要推出一个新的概念: loaders

所谓 loaders 就是说把原本 webpack 不支持加载的文件或者文件内容通过 loaders 进行加载解析，实现应用的目的

我们这里需要使用到的loaders是babel-loader, babel-loader又依赖babel

先来安装一下依赖

npm i @babel/core @babel/preset-env babel-loader -D

在根目录新建一个.babelrc文件, 配置如下

{
  "presets": [
    "@babel/preset-env"
  ]
}

webpack.config.js文件也需要添加module属性，属性内容是一个rules集合，内容如下

image.png

这个时候我们再重新打包一下试试看, myFun函数返回的内容就能被成功解析了

image.png

3.2 webpack 加载 css、less 等样式文件

3.2.1 解析css文件

现在我们基于上面的内容调整一下src文件下的代码, 新增一个index.css文件

// index.css
.text {
  font-size: 20px;
  color: green;
}

// test.js
const myFun = () => `<div class="text">css样式</div>`

export { myFun }

// index.js
import { myFun } from './test.js'
import './index.css'

document.write(myFun())

如果此时, 执行打包命令npm run build, 终端就会报错, 提示我们需要添加对应的loader来处理不能被编译的文件

image.png

这里解析 css 文件需要用到两个loader, 分别是style-loader, css-loader

css-loader用于加载 css 文件并生成 commonjs 对象，style-loader 用于将样式通过 style 标签插入到 head 中

• 安装

npm i style-loader css-loader -D

• webpack.config.js配置

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

use 对象里是个数组，需要格外注意到 loader 顺序，是先写 style-loader，再写 css-loader, 但是执行的时候是先加载 css-loader，将 css 解析好后再将 css 传递给 style-loader

• 展示

image.png

3.2.2 解析less文件

解析less文件也是一样的, 我们现在把index.css改成index.less文件, 重新打包的时候照样会提示我们没有loader来解析index.less这个文件

• 安装less相关依赖

npm i less less-loader -D

• 添加less文件解析配置

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

完成以上步骤之后, 我们会发现打包之后效果是一样的

注意, 我安装完之后打包, 报错了, 百度之后, 是less-laoder版本过高,替换成低版本之后就可以了

3.3 webpack加载图片

我们在src目录下面放一张图片, 并修改一下我们的样式

image.png

3.3.1 file-loader

• 安装依赖

npm i file-loader -D

• 添加配置

module: {
    rules: [
      //...
      {
        test: /.(jpg|png|gif|jpeg)$/,
        use: 'file-loader'
      }
     ]
  }

• 打包压缩刷新之后, dist目录下就会有我们打包过来的图片, index.html文件也展示了对应的图片

3.3.2 url-laoder

url-loader 直接内置了 file-loader，是对它的再封装，在配置文件里可以直接去掉 file，用 url 替换

• 安装依赖

npm i url-loader -D

• 添加配置

limit是图片大小的上限, 如果图片大小小于这个值, 就会这打包为base64格式, 否则打包出来的任然是图片

module: {
    rules: [
      //...
      {
        test: /.(jpg|png|gif|jpeg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 160000,
            name: 'imgs/[name].[hash].[ext]'
          }
        }]
      }
     ]
  }

• 我们这个时候打包完, 页面正常显示, index.js文件里倒是多出了很多内容, 多的内容就是打包图片的base64数据

4. 插件的使用 —— HtmlWebpackPlugin

我们dist文件下index.html都是我们手动创建的, 使用HtmlWebpackPlugin插件, 打包的时候就可以自动生成

• 安装

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

• 配置

const HtmlWebpackPlugin = require('html-webpacl-plugin')
module.exports = {
    //...
    plugins: [
        new HtmlWebpackPlugin()
    ],
    module: {
        //...
    },
}

• 这个时候打包, 会有一大片的报错信息, 应该是HtmlWebpackPlugin这个插件里有些内容与babel-loader依赖相冲突了

image.png

解决的办法是: babel-loader配置下加上exclude: /node_modules/配置，就是忽略依赖包的意思

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

这个时候就可以成功打包, dist文件下就会自动生成index.html文件

5. 文件监听

文件监听是在发现源码发生变化时，自动重新构建出新的输出文件

我们上面每修改一次内容, 就手动打包一下, 着实有点麻烦, 这个时候文件监听就非常的方便了

文件监听的两种方法：

• 在package.json文件中添加一条watch命令

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch"
  },

执行npm run watch

• 在webpack.config.js配置

module.exports = {
    watch: true,
    entry: {...},
    //...
}

执行npm run build

开启文件监听之后, 我们修改代码, 刷新浏览器, 就直接呈现更改后的内容

6. 热更新

我们现在即使使用了文件监听, 还是需要手动去刷新浏览器更新修改内容; 而热更新的意思就是可以在编辑器上修改代码的同时，在浏览器上看到同步更新效果

wds 无刷新浏览器

wds 就是webpack-dev-server的简称，相比前面讲的文件监听watch这种方式来说，这个方案本身不输出文件，而是放在内存中，性能更好

• 安装

npm i webpack-dev-server -D

• package.json中添加一条命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },

• webpack.congig.js添加webpack内置插件HotModuleReplacementPlugin

const webpack = require('webpack')
module.exports = {
    //...
    plugins: [
        new HtmlWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin(),
    ],
    devServer: {
        contentBase: './dist',
        hot: true
    },
    //...
}

• 执行npm run dev
  这个时候, 我们修改内容, 就会发现浏览器自动刷新, 耶

注: 本文是根据图雀社区webpack系列内容学习, 总结的笔记, 大家可以去社区深入了解一下