vue3学习08webpack相关

webpcak 打包css样式

在js文件夹下创造一个element.js文件

ini 复制代码

const divEl = document.createElement("div");
divEl.className = "title";
divEl.innerHTML = "你好呀，小居居";
document.body.appendChild(divEl);

并在main.js主入口中引入

arduino 复制代码

import './js/element';

再打包之后即可显示在src下创建css文件夹，并创建一个style.css，在elemet文件中import

arduino 复制代码

import '../css/style.css'

此时需要下载一个css-loader和style-loacer

复制代码

npm install css-loader -D
npm install style-loader -D

同时在webpack,config,js中配置

javascript 复制代码

      {
        test:/\.css$/,
        use: [
          "style-loader",
          "css-loader"
        ]
      },

use中是从后往前执行顺序，因此要先加载css-loader

less的使用

安装less-loader

复制代码

npm install less-loader -D

配置

javascript 复制代码

{
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      },

认识postCSS

什么是post

postCss是一个通过javascript来转换样式的工具
这个工具可以帮助我们进行css的转换和适配，比如自动添加浏览器前缀，css样式重置
实现这些功能需要借助postCss对应的插件

npm install postcss postcss-cli -D

再安装一些插件

复制代码

 npm install autoprefixer -D

使用方式

css 复制代码

npx postcss --use autoprefixer -o demo.css test.css

webpack中使用

下载loader

复制代码

 npm install postcss-loader -D

webpack.config.js中配置

css 复制代码

      {
        test:/\.css$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  require("autoprefixer")
                ]
              }
            }
          }
        ]
      },

也可以将postcss单独成为一个文件配置根文件下创建postcss.config.js

复制代码

npm install postcss-preset-env -D

css 复制代码

module.exports = {
  plugins: [
    require("postcss-preset-env")
  ]
}

在element.js中引入less文件,打包完成之后出现效果。

webpack打包图片

element.js中创建元素和引入

ini 复制代码

import '../css/image.css'
const bgDivEl = document.createElement('div');
bgDivEl.className = "image-bg";

document.body.appendChild(bgDivEl);

创建file-loader去匹配但是webpack5基本不使用了

复制代码

npm install file-loader -D

在config.js中配置规则

javascript 复制代码

    {
        test: /\.(jpg|png|gif|svg|jpeg)$/,
        use: "file-loader"
      }

通过src引入图片

ini 复制代码

//设置img元素的src

import m3Img from '../img/m3.png'
const imgEl = document.createElement('img');
imgEl.src = m3Img;

document.body.appendChild(imgEl);

图片文件命名

css 复制代码

      {
        test: /\.(jpg|png|gif|svg|jpeg)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "img/[name]_[hash:6].[ext]"  //build下创建img文件夹，原来名字_6位哈希.后缀名
          }
        }
      }

url-loader

与file-loader工作方式相似，可以将较小文件转成base64的url

复制代码

 npm install url-loader -D

config配置

yaml 复制代码

      {
        test: /\.(jpg|png|gif|svg|jpeg)$/,
        use: {
          loader: "url-loader",
          options: {
            name: "img/[name]_[hash:6].[ext]"，
            limit: 100 * 1024   //小于100k才能解析
          }
        }
      }

asset moduletype

从webpack5之前需要使用一些loader,如url-loader,file-loader,5开始，可以直接使用asset module type,替代上诉loader config中配置rules

css 复制代码

      {
        test: /\.(jpg|png|gif|svg|jpeg)$/,
        type: "asset",
        generator: {
          filename: "img/[name]_[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100*1024
          }
        }
      }

字体图标

config配置

css 复制代码

      {
        test: /\.(eot|ttf|woff2?)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "font/[name]_[hash:6].[ext]"
          }
        }
      }

webpack插件plugin

loader用于特定的模块类型进行转换
plugin可以用于执行更加广泛的任务，比如打包优化，资源管理，环境变量注入

cleanWebpackPlugin

重新打包时，自动删除dist文件夹

复制代码

npm install clean-webpack-plugin -D

在config中配置

javascript 复制代码

const { CleanWebpackPlugin } = require("clean-webpack-plugin")



  plugins: [
    CleanWebpackPlugin
  ]

htmlwebpackplugin

html是编写在根目录下，而最终打包的dist文件夹中是没有index.html文件的，在进行项目部署时，必然要有对应的入口文件index.html,所以需要对index.html进行打包处理

css 复制代码

npm install html-webpack-plugin -D

config配置rules

arduino 复制代码

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



  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',  //指定模板
      title: '耶'
    }),
    new DefinePlugin({
      BASE_URL:"'./'"
    })
  ]

复制public文件夹的文件至build文件

需要用到插件

go 复制代码

npm install copy-webpack-plugin -D

config

php 复制代码

const CopyWebpackPlugin = require("copy-webpack-plugin")

    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public',
          to: './',
          globOptions: {
            ignore: [
              "**/index.html" //忽略文件
            ]
          }
        }
      ]
    })

查看报错源代码

在config中配置

arduino 复制代码

  mode: "development",   //打包上线设置production
  devtool: "source-map",  //方便调试代码错误

完整的webpack.config.js

javascript 复制代码

const path = require('path');
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin} = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin")
module.exports = {
  mode: "development",
  devtool: "source-map",
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "js/bundle.js"
  },
  module: {
    rules: [
      {
        test:/\.css$/,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      },
      {
        test: /\.js$/,
        loader: "babel-loader"
      },
      // {
      //   test: /\.(jpg|png|gif|svg|jpeg)$/,
      //   use: {
      //     loader: "url-loader",
      //     options: {
      //       name: "img/[name]_[hash:6].[ext]",
      //       limit: 100 * 1024   //小于100k才能解析
      //     }
      //   }
      // },
      {
        test: /\.(jpg|png|gif|svg|jpeg)$/,
        type: "asset",
        generator: {
          filename: "img/[name]_[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100*1024
          }
        }
      },
      {
        test: /\.(eot|ttf|woff2?)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "font/[name]_[hash:6].[ext]"
          }
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',  //指定模板
      title: '耶'
    }),
    new DefinePlugin({
      BASE_URL:"'./'"
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public',
          to: './',
          globOptions: {
            ignore: [
              "**/index.html"
            ]
          }
        }
      ]
    })
  ]
}

为什么需要babel

开发中，我们想要使用ES6+的语法，想要使用TypeScript,都不开babel,对于react的jsx语法，babel可以使之转成javaScript代码

babel是一个工具链，主要用于ES6+代码转换成向后兼容的Jvascript
包括语法转换、源代码转换

javascript 复制代码

    {
        test: /\.(jpg|png|gif|svg|jpeg)$/,
        use: "file-loader"
      }

如果我们希望在命令行尝试使用babel,需安装如下库

@babel/core:babel的核心代码，必须安装
@babel/cli：可以让我们在命令行使用babel

bash 复制代码

npm install @babel/core @babel/cli -D

命令行输入如上命令安装babel

csharp 复制代码

npx babel demo.js --out-dir dist

将demo.js文件输出到dist文件夹下

对于箭头函数，需要安装箭头函数对应的插件

bash 复制代码

npm install @babel/plugin-transform-arrow-functions -D

使用箭头函数需要在后面加入

css 复制代码

npx babel demo.js --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

对于转换const 需要安装

bash 复制代码

npm install @babel/plugin-transform-block-scoping -D

同样的，在使用后面多添加一行命令

css 复制代码

npx babel demo.js --out-dir dist --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping

要转换的东西过多，可以安装一个preset,集成了基本的转换功能

bash 复制代码

npm install @babel/preset-env -D

使用如下命令

css 复制代码

npx babel demo.js --out-dir dist --presets=@babel/preset-env

在webpack中使用babel

css 复制代码

npm install babel-loader -D


//在webpack.config.js的rule中配置
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            plugins: [
              "@babel/plugin-transform-arrow-functions",
              "@babel/plugin-transform-block-scoping",
            ]
          }
        }
      }
      
      //或者直接配置preset
      options: {
            presets: [
              "@babel/preset-env"
            ]
          }

babel的配置文件

可以将babel的配置信息放到一个独立的文件中，babel给我们提供了两种配置文件的编写

babel.config.json(或者.js文件,更加推荐）
.babelrc.json(或者.babelrc,.js)文件早期使用较多

在根文件下创建一个babel.config.js文件

ini 复制代码

module.exports = {
  presets: [
    "@babel/preset-env"
  ]
}

webpcak中对vue进行打包

在主入口文件main.js引入vue

javascript 复制代码

import {createApp} from 'vue'

同时需要下载vue3

复制代码

npm install vue

此时在main入口文件测试vue代码

javascript 复制代码

import {createApp} from 'vue'

const app = createApp({
  template: `<h2>我是一只居居</h2>`,
  data() {
    return {
      title: 'hello world'
    }
  }
});
app.mount('#app');

此时报一个错误

kotlin 复制代码

Component provided template option but runtime compilation is not supported in this build of Vue

因为此时的vue版本只支持runtime-only,无法正确解析template,因此将import一个支持template版本的vue

javascript 复制代码

import {createApp} from 'vue/dist/vue.esm-bundler'  //指定vue版本

vue编写方式

render函数方式，使用h函数来编写渲染内容，可以直接返回一个虚拟节点，也就是VNode节点
通过.vue文件中的template来编写模板，通过vue-loader对其进行编译和处理

sfc文件编写vue

vetur 和 volar(支持vue3) vscode插件

使用vue-loader处理sfc文件

java 复制代码

npm install vue-loader@next -D
npm install @vue/compiler-sfc -D

创建一个App.vue文件，并在main.js中引入创建

ini 复制代码

import APP from "./vue/APP.vue";

const app = createApp(APP);
app.mount('#app');

在config中配置规则

javascript 复制代码

const { VueLoaderPlugin} = require('vue-loader/dist/index')
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      .......
      new VueLoaderPlugin()