webpack的使用

1.基本概念

webpack是一个js应用程序静态模拟打包器

可以处理静态文件，把很多文件打包整合到一起, 缩小项目体积, 提高加载速度

2.使用步骤

1. 初始化包环境

   yarn init

2. 安装依赖包

   yarn add webpack webpack-cli -D

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

   scripts: {
       "build": "webpack"
   }

4. 新建目录src

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

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

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

   import {addFn} from './add/add'
   ​
   console.log(addFn(10, 20));

7. 运行打包命令

   yarn build
   #或者 npm run build

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

注：导入新的方法后直接执行yarn build重新打包

3.配置webpack

3.1配置入口和出口

src并列处新建webpack.config.js文件，填入配置项

const path = require("path")

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

接着修改package.json,自定义打包命令

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

3.2.自动生成html的插件

1. 下载插件

   yarn add html-webpack-plugin  -D

2. webpack.config.js配置

   // 引入自动生成 html 的插件
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   ​
   module.exports = {
       // ...省略其他代码
       plugins: [
           new HtmlWebpackPlugin({
               template: './public/index.html' // 以此为基准生成打包后html文件
           })
       ]
   }

3. 重新打包后观察dist下是否多出html并运行看效果

3.4_加载器 - 处理css文件问题

1. 安装依赖

   yarn add style-loader css-loader -D

2. webpack.config.js 配置

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   ​
   module.exports = {
       // ...其他代码
       module: { 
           rules: [ // loader的规则
             {
               test: /\.css$/, // 匹配所有的css文件
               // use数组里从右向左运行
               // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
               // 再用 style-loader 将样式, 把css插入到dom中
               use: [ "style-loader", "css-loader"]
             }
           ]
       }
   }

3. 新建src/css/li.css - 去掉li默认样式

   ul, li{
       list-style: none;
   }

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

   import "./css/index.css"

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

注：处理less方法类似

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

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

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

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

2. 图片转成 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个图片区别

4. webpack 开发服务器

4.1 为什么需要?

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

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

4.2 webpack-dev-server自动刷新

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

1. 下载包

   yarn add webpack-dev-server -D

2. 配置自定义命令

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

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

   yarn serve
   #或者 npm run serve

4.2_webpack-dev-server配置

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

   更多配置参考这里: DevServer | webpack 中文文档

   module.exports = {
       // ...其他配置
       devServer: {
         port: 3000 // 端口号
       }
   }