webpack入门必备（注：不懂的操作请访问官网https://www.webpackjs.com/）-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_53404077/article/details/128159020

本文详细介绍Webpack的基本使用方法，包括安装配置、资源加载、插件使用、代码分割及开发环境搭建等核心内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<script src="./src/index.js"></script>

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

				<script src="./main.js"></script>

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

配置文件

package.json同级目录新建webpack.config.js
基本配置

入口,出口

var path = require(‘path’)

module.exports = {
    entry: './src/index.js', // 指明打包开始文件
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'), //指明打包成果文件目录
        clean: true, // 清理dist下无用的文件夹
    },
}

解析路径
resolve

配置(与output同级)

// resolve 决定解析方式
    resolve: {
        // alias 别名 @ == src目录
        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
编写规则(与output同级)

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

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

image
src/assets/img/图片信息(保存一张图片)

导入
import smallyellow from “@/assets/img/图片信息”
应该会出现的错误描述
You may need an appropriate loader to handle this file type
你需要一个加载器
webpack 5 中，可以使用内置的 Asset Modules
编写规则（写在rules中）

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

加载（在dom中添加）

// 引入图片
import pic1 from '@/assets/img/no1.png';
import pic2 from '@/assets/img/no2.png';
console.log(pic1,pic2);

// 创建图片
    let img = document.createElement("img");
    img.src = pic1;
    img.width = 50;
    document.body.appendChild(img);

    // 创建div包裹图片
    let div = document.createElement('div');
    div.style = `display:inline-block;background- image:url(${pic2});width:50px;height:50px;background-size:100%;`;
    document.body.appendChild(div)

加载字体

下载字体（推荐网站https://www.iconfont.cn/）
src/assets/font/iconfont.css
src/assets/font/iconfont.ttf
webpack 5 中，可以使用内置的 Asset Modules
加载

// 引入字体
import '@/assets/font/iconfont.css'

// 创建span接收icon
    let span = document.createElement("span");
    span.innerText = "我是iconfont";
    span.classList.add('iconfont','icon-fabu');
    document.body.appendChild(span)

加载数据

json
默认支持
csv
npm install --save-dev csv-loader
配置

// 写在rules中
{
        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
配置（webpack.config.js）

//在最外层
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 和output同级
plugins: [new HtmlWebpackPlugin()],

MiniCssExtractPlugin
将css从js中剥离
减少js文件大小
安装
npm install --save-dev mini-css-extract-plugin
配置（同上）

// plugins同时只能存在一个 取里面的new 写在上一个数组里面
plugins: [new MiniCssExtractPlugin()],
// 取代 use: ['style-loader', 'css-loader'] （rules里面）
use: [MiniCssExtractPlugin.loader, "css-loader"],

CssMinimizerWebpackPlugin
将css压缩
安装
npm install css-minimizer-webpack-plugin --save-dev
配置

// 优化器 用于压缩css 与output同级
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
        ],
    },

TerserWebpackPlugin
webpack5 自带不需要安装
将html压缩
配置
const TerserPlugin = require(“terser-webpack-plugin”);
优化器配置

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

代码分割

每次dist里面出现新的js 都要在index.html里面引用一下

<script src="./dist/createButton.bundles.js"></script>
    <script src="./dist/header.bundles.js"></script>
    <script src="./dist/index.bundles.js"></script>

将js文件拆分为多个，以便按需加载
多个js被同时打包
新建/src/components/header.js
index.js引入
import “@/components/header.js”
多入口与多出口
配置多个入口文件

// 配置多个入口与出口
    entry: {
        index: './src/index.js',
        header: './src/components/header.js'
    },

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

output: {
        filename: '[name].bundles.js',  // [name] 取值为 index.bundles.js  header.bundles.js
        path: path.resolve(__dirname, 'dist'), //指明打包文件目录
        clean: true,  // 清楚dist下多余的文件
    },

重复导入
修改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: './src/components/header.js',
             dependOn:['createButton']
         },
        createButton: {
            import: '@/utils/createButton.js'
        }
    },

动态导入

去除header.js的入口配置

entry: {
        index: {
            import: '@/index.js',
            dependOn: ['createButton']
        },
        // header: {
        //     import: './src/components/header.js',
        //     dependOn:['createButton']
        // },
        createButton: {
            import: '@/utils/createButton.js'
        }
    },

去除index.html的引用

<script src="./dist/createButton.bundles.js"></script>
    <!-- <script src="./dist/header.bundles.js"></script> -->
    <script src="./dist/index.bundles.js"></script>

点击首页按钮时创建header

开发环境

开发环境
mode:“development”
source map
代码映射
devtool: ‘inline-source-map’,
开发工具
webpack-dev-server
npm install --save-dev webpack-dev-server
写在webpack.config.js的

使用webpack搭建vue脚手架

新建文件夹 webpack-vue
初始化npm项目
npm init -y
安装webpack工具
npm install webpack webpack-cli --save-dev
安装devServer
npm install --save-dev webpack-dev-server
添加运行指令
根目录新建入口文件
src/main.js
wepack配置文件
webpack.config.js

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

安装vue
安装版本
npm install vue
加载vue文件

main.js

无论何时 app.mount(‘#app’),要在最下面

console.log("项目入口");

import { createApp } from "vue";
import App from '@/App.vue'
const app = createApp(App);
app.mount('#app'),

App.vue

<template>
    <h2>app</h2>
    <button @click="count++">点击{{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(10)
</script>

<style leng="less">
button {
    color: red;
}
</style>

安装
npm install -D vue-loader
修改配置


const { VueLoaderPlugin } = require('vue-loader')
module:{
        rules:[
            { test:/\.vue$/i, use:['vue-loader'] },
            { test:/\.css$/i, use:['style-loader','css-loader'] },
            { test:/\.less$/i, use:['style-loader','css-loader','less-loader'] },
        ]
    },

vue-router使用

安装
npm install vue-router
页面修改
App.vue

    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>

/src/views/HomeView.vue

<template>
    <div class='home'>
        <h1>home</h1>
    </div>
</template>

/src/views/AboutView.vue

<template>
    <div class='about'>
        <h1>about</h1>
    </div>
</template>

新建/src/router/index.js

import {createRouter, createWebHashHistory} from "vue-router"

import HomeVue from "@/views/HomeView.vue"


const routes = [
    { path: '/', component: HomeVue },
    { path: '/about', component: ()=>import(/* webpackChunkName about */"@/views/AboutView.vue") },
]


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

})

export default router

main.js引入

在根目录新建public/index.html

安装
npm install --save-dev html-webpack-plugin
配置

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            inject: 'body'
        }),
        new VueLoaderPlugin()
    ],