武功秘籍之 webpack 葵花宝典

一、作用

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

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

二、如何安装

1.npm init -y

创建npm项目

2.npm install webpack webpack-cli --save-dev

安装webpack以及脚手架

三、目录

1.原始目录

index.html

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

src/index.js

2.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);
}

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

1.css

• src/assets/css/main.css
• 导入 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

2.img

• src/assets/img/smallyellow.gif
• 导入 import smallyellow from "@/assets/img/smallyellow.gif"
• 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);

3.加载字体

• 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);

4.加载数据

• json 默认支持
• csv npm install --save-dev csv-loader
• xml npm install --save-dev xml-loader

5.less

• src/assets/css/header.less
• 导入 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',
                ],
            },

六、插件类

1.HtmlWebpackPlugin

• html5自动生成并引入bundle包
• 安装 npm install --save-dev html-webpack-plugin
• 配置 const HtmlWebpackPlugin = require('html-webpack-plugin');
• plugins: [new HtmlWebpackPlugin()],

2.MiniCssExtractPlugin

• 将css从js中剥离 减少js文件大小
• 安装 npm install --save-dev mini-css-extract-plugin
• 配置 plugins: [new MiniCssExtractPlugin()],
• use: [MiniCssExtractPlugin.loader, "css-loader"],

3.CssMinimizerWebpackPlugin

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

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

4.TerserWebpackPlugin

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

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

七、开发环境

• mode:“development”
• source map devtool: 'inline-source-map',
• 开发工具 webpack-dev-server
• npm install --save-dev webpack-dev-server

    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

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

<template>
    <div @click="count++">
        App: <span >{{count}}</span>
    </div>
</template>    
<script>
    export default{
        data(){
            return{
                count:10
            }
        }
    }
</script>

安装 npm install -D vue-loader
修改配置 const {VueLoaderPlugin} = require("vue-loader")
加载less与css

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

<template>
    <div>
        <router-link :to="{name:'home'}">首页</router-link>
        <router-link :to="{name:'about'}">关于</router-link>
        <router-view></router-view>
    </div>
</template>  

/src/views/HomeView.vue
/src/views/AboutView.vue
新建/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"
        })
    ]