webpack的基本使用

木可倾心
96 阅读5分钟

1.webpack基本概念

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

webpack官网

  • 现在js应用程序的静态模块打包器(module bundler)

webpack能做什么

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

image-20210207234927772.png

其中功能：

  • less/sass ->css
  • ES6/7/8 ->ES5
  • html/css/js ->压缩合并

2.webpack的基本使用步骤

1. webpack基础使用

目标:把src下的两个js文件，打包到一个js中，并输出到默认的dist目录下

默认入口: ./src/index.js

默认出口: ./dist/mian.js

==注意:路径上, 文件夹, 文件名不能叫webpack/其他已知的模块名==

  1. 初始化环境

    npm init -y
# 或者npm init

  2. 安装依赖包

    npm install webpack webpack-cli -D

  3. 配置scripts(自定义命令）

    scripts:{
	"build":"webpack"
}

  4. 新建文件src

  5. 新建一个src/add/add.js 定义求和函数导出

    export const addFun = (a, b)=>a + b

  6. 新建src/index.js导入使用

    import {addFun} from './add/add'

console.log(addFun(10,20))

  7. 运行打包命令

    npm run build

总结: src并列处, 生成默认dist目录和打包后默认main.js文件

2. webpack更新打包

代码变更，如何重新打包

  1. 新建src/arrAdd/arrAdd.js 定义导出数组求和方法

    export const getArrSum = arr => arr.reduce((sum, val) => sum += val, 0)

  2. src/index.js 导入使用

    import {addFun} from './add/add'
import {getArrSum} from './arrAdd/arrAdd'
console.log(addFun(10,20))
console.log(getArrSum([6,7,8]))

  3. 重新打包

    npm run build
  1. src下开发环境，dist是打包后，分别独立
  2. 打包后格式压缩，变量压缩

3.webpack的配置

1. webpack入口和出口

默认入口:./src/index.js

默认出口：./dist/main.js

webpack配置 webpack.config.js

  1. 新建src并列处，webpack.config.js

  2. 填入配置项

    const path = require("path")

module.exports = {
    entry: "./src/main.js", // 入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口路径
        filename: "bundle.js" // 出口文件名
    }
}

  3. 修改package.json, 自定义打包命令 - 让webpack使用配置文件

    "scripts": {
    "build": "webpack"
},

2. 打包流程图

image-20210227101044654.png

3. 插件-自动生成html文件

  1. 下载插件

    npm install html-webpack-plugin  -D

  2. webpack.config.js配置

    // 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./src/main.js", // 入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口路径
        filename: "bundle.js" // 出口文件名
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' // 以此为基准生成打包后html文件
        })
    ],
}

4. 加载器-处理css文件问题

  1. 新建 src/css/index.css

  2. 编写去除li圆点样式代码

  3. （重要）一定要引入到入口才会被webpack打包

  4. 执行打包命令观察效果

    总结：webpack默认只能处理js类型文件

5. 加载器-处理css文件

loaders加载器, 可让webpack处理其他类型的文件, 打包到js中

原因: webpack默认只认识 js 文件和 json文件

style-loader文档

css-loader文档

  1. 安装依赖

    npm install style-loader css-loader -D

  2. webpack.config.js配置

    const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: "./src/main.js", // 入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口路径
        filename: "bundle.js" // 出口文件名
    },
    module: { 
        rules: [ // loader的规则
          {
            test: /\.css$/, // 匹配所有的css文件
            // use数组里从右向左运行
            // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
            // 再用 style-loader 将样式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

  3. 新建src/css/index.css 去除里默认样式

    ul, li{
    list-style: none;
}

  4. 引入到main.js (因为这里是入口需要产生关系, 才会被webpack找到打包起来)

    import "./css/index.css"

  5. 运行打包后dist/index.html观察效果和css引入情况

6. 加载器处理less文件

less-loader让webpack处理less文件, less模块翻译less代码

less-loader文档

  1. 下载依赖包

    npm install less less-loader -D

  2. webpack.config.js 配置

    module: {
  rules: [ // loader的规则
    // ...省略其他
    {
    	test: /\.less$/,
    	// 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]
}

  3. src/less/index.less - 设置li字体大小24px

    @size:24px;

ul, li{
    font-size: @size
}

  4. 引入到main.js中

    import "./less/index.less"

  5. 打包运行dist/index.html 观察效果

7. 加载器- 处理图片文件

用asset module方式(webpack5版本新增)

asset module文档

如果使用的是webpack5版本的, 直接配置在webpack.config.js - 的 rules里即可

{
    test: /\.(png|jpg|gif|jpeg)$/i,
    type: 'asset'
}

如果你用的是webpack4及以前的, 请使用者里的配置

url-loader文档

file-loader文档

  1. 下载依赖包

    npm install url-loader file-loader -D

  2. webpack.config.js 配置

    {
  test: /\.(png|jpg|gif|jpeg)$/i,
  use: [
    {
      loader: 'url-loader', // 匹配文件, 尝试转base64字符串打包到js中
      // 配置limit, 超过8k, 不转, file-loader复制, 随机名, 输出文件
      options: {
        limit: 8 * 1024,
      },
    },
  ],
}

    图片转成 base64 字符串

    • 好处就是浏览器不用发请求了，直接可以读取
    • 坏处就是如果图片太大，再转base64就会让图片的体积增大 30% 左右

  3. src/assets/准备老师发的2个图文件

  4. 在css/less/index.less - 把小图片用做背景图

    body{
    background: url(../assets/logo_small.png) no-repeat center;
}

  5. 在src/main.js - 把大图插入到创建的img标签上, 添加body上显示

    // 引入图片-使用
import imgUrl from './assets/1.gif'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)

  6. 打包运行dist/index.html观察2个图片区别

8. web加载文件优缺点

图片转成 base64 字符串

  • 好处就是浏览器不用发请求了，直接可以读取
  • 坏处就是如果图片太大，再转base64就会让图片的体积增大 30% 左右

9. webpack开发服务器

1._webpack开发服务器-为何学?

文档地址: webpack.docschina.org/configurati…

抛出问题: 每次修改代码, 都需要重新 yarn build 打包, 才能看到最新的效果, 实际工作中, 打包 yarn build 非常费时 (30s - 60s) 之间

为什么费时?

  1. 构建依赖
  2. 磁盘读取对应的文件到内存, 才能加载
  3. 用对应的 loader 进行处理
  4. 将处理完的内容, 输出到磁盘指定目录

解决问题: 起一个开发服务器, 在电脑内存中打包, 缓存一些已经打包过的内容, 只重新打包修改的文件, 最终运行加载在内存中给浏览器使用

2_webpack-dev-server自动刷新

目标: 启动本地服务, 可实时更新修改的代码, 打包变化代码到内存中, 然后直接提供端口和网页访问

  1. 下载包

    npm install webpack-dev-server -D

  2. 配置自定义命令

    scripts: {
	"build": "webpack",
	"serve": "webpack serve"
}

  3. 运行命令-启动webpack开发服务器

    yarn serve
#或者 npm run serve

总结: 以后改了src下的资源代码, 就会直接更新到内存打包, 然后反馈到浏览器上了

3._webpack-dev-server配置

  1. 在webpack.config.js中添加服务器配置

    更多配置参考这里: webpack.docschina.org/configurati…

    module.exports = {
    // ...其他配置
    devServer: {
      port: 3000 // 端口号
    }
}
avatar
文章
阅读
粉丝