webpack5最新超详解

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: bor