WebPack

WebPack

作用

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具

将各种类型资源打包编译为最基础的html、js、css、img等

安装

npm init -y

• 创建npm项目

npm install webpack webpack-cli --save-dev

• 安装webpack以及脚手架

HelloWorld

原始目录

• index.html

• src/index.js

webpack目录

• src/index.js

  • 引入外部模块

    console.log(“项目入口”);

    import { createButton } from “./utils/createbutton”;
    createButton(“首页按钮”,()=>{
    console.log(“首页按钮点击了”);
    })

    • utils/createButton.js

      export function createButton(text, clickCallBack) {
      let button = document.createElement(“button”);
      button.innerText = text;
      button.onclick = clickCallBack;
      document.body.appendChild(button);
      }

• dist/index.html

• webpack操作

  • npx webpack

    • npx可以用于本地项目安装的指令工具
    • 会在package.json同级目录编译生成dist文件夹 存放编译好的main.js

配置文件

package.json同级目录新建webpack.config.js

基本配置

• 入口

  • entry

    • “./src/index.js”

• 出口

  • output

    • filename

      • “main.js”

    • path

      • const path=require(“path”)
      • path.resolve(__dirname, “dist”)

    • clean:true

      • 自动清理历史残留

解析路径

• resolve

  • 配置

    resolve:{
    alias:{
    “@”:path.resolve(__dirname, “src”)
    }
    }

  • 导入

    import { createButton } from “@/utils/createbutton”;

npm 自定义指令

• npm run build

  • npm webpack

资源加载

webpack默认只能加载js和json资源

• 其他资源类型（img/css/vue）需要安装加载器loader

css

• src/assets/css/main.css

  *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: red;
  }

• 导入

  • import “@/assets/css/main.css”

• 错误描述

  • You may need an appropriate loader to handle this file type

    • 你需要一个加载器

• 安装

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

• 编写规则

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

• 链会逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader

image

• src/assets/img/smallyellow.gif

• 导入

  • import smallyellow from “@/assets/img/smallyellow.gif”

• 错误描述

  • You may need an appropriate loader to handle this file type

    • 你需要一个加载器

• webpack 5 中，可以使用内置的 Asset Modules

• 编写规则

  {
  test: /.(png|svg|jpg|jpeg|gif)$/i,
  type: ‘asset/resource’,
  },

• 加载

  let img = document.createElement(“img”);
  img.src = smallyellow;
  document.body.appendChild(img);

  let div = document.createElement("div");
  div.style.width = "400px";
  div.style.height = "227px";
  div.style.backgroundImage = `url(${smallyellow})`;
  document.body.appendChild(div);
  

加载字体

• src/assets/font/iconfont.css

• src/assets/font/iconfont.ttf

• webpack 5 中，可以使用内置的 Asset Modules

• 加载

  let cat = document.createElement(“span”);
  cat.innerText=“分类”;
  cat.classList.add(“iconfont”, “icon-ico-category”)
  document.body.appendChild(cat);

加载数据

• json

  • 默认支持

• csv

  • npm install --save-dev csv-loader

  • 配置

    {
    test: /.(csv|tsv)$/i,
    use: [‘csv-loader’],
    },

• xml

  • npm install --save-dev xml-loader

  • 配置

    {
    test: /.xml$/i,
    use: [‘xml-loader’],
    },

less

• src/assets/css/header.less

  .header{
  .nav{
  width: 80%;
  margin: 0 auto;
  }
  }

• 导入

  • import “@/css/header.less”

• 安装

  • npm install less less-loader --save-dev

• 编写规则

  {
  test: /.less$/i,
  use: [
  // compiles Less to CSS
  ‘style-loader’,
  ‘css-loader’,
  ‘less-loader’,
  ],
  },

插件

HtmlWebpackPlugin

• html5自动生成并引入bundle包

• 安装

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

• 配置

  • const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
  • plugins: [new HtmlWebpackPlugin()],

MiniCssExtractPlugin

• 将css从js中剥离

  • 减少js文件大小

• 安装

  • npm install --save-dev mini-css-extract-plugin

• 配置

  • plugins: [new MiniCssExtractPlugin()],
  • use: [MiniCssExtractPlugin.loader, “css-loader”],

CssMinimizerWebpackPlugin

• 将css压缩

• 安装

  • npm install css-minimizer-webpack-plugin --save-dev

• 配置

  optimization: {
  minimizer: [
  new CssMinimizerPlugin(),
  ],
  },

TerserWebpackPlugin

• webpack5 自带不需要安装

• 将html压缩

• 配置

  • const TerserPlugin = require(“terser-webpack-plugin”);

  • 优化器配置

    optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    },

代码分割

将js文件拆分为多个，以便按需加载

多个js被同时打包

• 新建/src/components/header.js

  console.log(“header入口”);

• index.js引入

  • import “@/components/header.js”

多入口与多出口

• 配置多个入口文件

  entry:{
  index:“@/index.js”,
  header:“@/components/header.js”
  },

  • 每个入口文件都会被自动引入index.html
  • 在index.js中不需要在引入header.js

• 配置多个出口文件

  output:{
  filename:“[name].bundle.js”,
  path:path.resolve(__dirname, ‘dist’),
  clean:true
  },

重复导入

• 修改header.js

  console.log(“header入口”);

  import { createButton } from “@/utils/createbutton”;

  createButton(“header按钮”,()=>{
  console.log(“点击了header按钮”);
  })

• 此时工具模块createButton被同时打包到了index.bundle.js和header.bundle.js

• 解决方案

  • 将createButton作为一个单独模块

  • header.js与index.js依赖createButton

  • 重新配置入口文件

    entry:{
    index:{
    import:“@/index.js”,
    dependOn:[“createbutton”]
    },
    header:{
    import:“@/components/header.js”,
    dependOn:[“createbutton”]
    },
    createbutton:{
    import:“@/utils/createbutton.js”
    }
    },

动态导入

• 去除header.js的入口配置

  entry:{
  index:{
  import:“@/index.js”,
  dependOn:[“createbutton”]
  },
  // header:{
  // import:“@/components/header.js”,
  // dependOn:[“createbutton”]
  // },
  createbutton:{
  import:“@/utils/createbutton.js”
  }
  },

• 点击首页按钮时创建header

  import(/* webpackChunkName:“header” */“@/components/header.js”).then(()=>{
  console.log(“header导入完毕”);
  })

bundle分析

• 分析输出结果来检查模块在何处结束

• webpack-chart

  • https://alexkuz.github.io/webpack-chart/

  • 创建生成分析文件指令

    • "profile": "webpack --profile --json > stats.json"
      

    • npm run profile

  • 用页面打开stats.json

开发环境

开发环境

• mode:“development”

source map

• 代码映射
• devtool: ‘inline-source-map’,

开发工具

• webpack-dev-server

  • npm install --save-dev webpack-dev-server

  • devDerver

    devServer:{
    open:true,
    host:“192.168.0.10”,
    port:9090
    }

使用webpack搭建vue脚手架

1. 新建文件夹 webpack-vue

2.初始化npm项目

• npm init -y

3.安装webpack工具

• npm install webpack webpack-cli --save-dev

4.安装devServer

• npm install --save-dev webpack-dev-server

5.添加运行指令

“build”: “webpack --mode production”,
“serve”: “webpack serve --mode development”

6.根目录新建入口文件

• src/main.js

  console.log(“项目入口”);

7.wepack配置文件

• webpack.config.js

  const path = require(“path”)
  module.exports={
  entry:“./src/main.js”,
  output:{
  filename:“[name].bundle.js”,
  path:path.resolve(__dirname, “dist”)
  }
  }

8.新建html页面加载bundle

• dist/index.html

9.安装vue

• 安装版本

  • npm install vue

10.加载vue文件

• main.js

  console.log(“项目入口”);

  import { createApp } from “vue”
  import App from “./App.vue”

  createApp(App).mount(“#app”)

• App.vue

11.vue-router使用

• 安装

  • npm install vue-router

• 页面修改

  • App.vue

    首页 关于

  • /src/views/HomeView.vue

    首页

    </div>
    

• 新建/src/router/index.js

  import {createRouter, createWebHashHistory } from “vue-router”
  import HomeView from “@/views/HomeView.vue”
  import AboutView from “@/views/AboutView.vue”

  const routes = [
  { path: ‘/’, name: “home”, component: HomeView },
  { path: ‘/about’, name: “about”, component: AboutView },
  ]

  const router = createRouter({
  history: createWebHashHistory(),
  routes,
  })

  export default router

• main.js引入

  console.log(“项目入口”);

  import { createApp } from “vue”

  import App from “./App.vue”

  import router from “./router”;

  const app = createApp(App)

  app.use(router)

  app.mount(“#app”)

12.在根目录新建public/index.html

• 安装

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

• 配置

  • const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

  • plugins: [
    

    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
    template:“./public/index.html”
    })
    ]

  注：，随着webpack版本更新过快，仅供参考