2022基于webpack从0搭建vue项目,vue2.0和vue3.0,解决了中间的报错问题。

发布时间:2022-08-01 发布网站:https://blog.csdn.net/qq_54753561
前端之家收集整理的这篇文章主要介绍了2022基于webpack从0搭建vue项目,vue2.0和vue3.0,解决了中间的报错问题。前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

创建项目目录文件 webpackProject

在桌面鼠标右键新建 webpackProject 文件夹

初始化项目的目录 生成 --pagege.json 的作用就是依赖的单记录,启动命令,版本信息,包管理器

命令 npm init -y

安装 webpack CLI

命令 npm install --save-dev webpack-cli

安装 webpack

命令 npm i webpack -D

对 -g -S -D 的补充

npm i xx -g:npm install xx --global的简写,对模块进行全局安装。
所谓全局安装,是指把模块安装到操作系统上,全局是指操作系统,全局安装完成后,一般会安装到AppDataAppData\Roaming\npm目录下。
如:npm install webpack -g,就是全局安装webpack,在操作系统的任何一个目录下都可以使用webpack所提供的指令。

npm i xx -D:npm install xx --save-dev的简写,对模块进行局部安装,模块写入到 devDependencies 对象。
局部的意思是只针对当前项目,模块一般安装到项目文件夹下的node_modules文件夹下。
devDependencies对象,是我们开发的时候需要用到的一些包,只用于开发阶段,真正打包上线的时候并不需要这些包,
因为这些工具只是你用来打包代码的,是用来识别特定文件以及代码,帮助我们生产最终文件的。如npm i vue-loader
vue-template-complier -D,就是在Vue项目中安装vue模板文件的解析插件,经过配置后即可在项目中解析vue模板

npm i xx -S:npm install xx --save 的简写,同上也是对模块进行局部安装,不同的是模块写入到 dependencies对象。
模块同上一样将安装到项目文件夹下的node_modules文件夹下。
dependencies对象,这个与devDependencies不同,是需要发布到生产环境中的,就比如你要跑一个基于vue的项目,
所以需要vue.js来支持,vue.js文件就需要跟随项目到最终的生产环境。npm i vue -S即可将Vue模块安装到项目的依赖中,
并一同发布到生产环境。

对插件版本的补充 可以cv到package.json 直接 npm i

{
  "name": "webpackProject",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack --config webpack.config.js",
    "serve": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.6.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "sass": "^1.49.8",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "vue-loader": "^17.0.0",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  },
  "dependencies": {
    "vue": "^3.2.31"
  }
}

在根目录下创建一个 webpack.config.js 文件

// 导入核心模块 path
const path = require('path')
// 导入自动生成html文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 导入自动清除 dist 目录的插件
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin')

// 配置文件
module.exports = {
    // 配置入口
    entry: './src/main.js',
    // webpack.config.js 文件 配置出口
    output: {
        filename: 'main[hash:8].js', // 出口文件的名称  'main[hash:8].js' 清除缓存
        path: path.join(__dirname, '/dist') // 出口文件生成的路径
    },
    // 配置 mode,development 开发环境  production 生产环境
    mode: 'production',
    // 配置解析
    resolve: {
        alias: {
            // key: value
            '@': path.join(__dirname, 'src')
        },
        // 配置可省略的后缀
        extensions: ['.js', '.css', '.less', '.vue']
    },
    // 配置源码映射
    // devtool: 'source-map',
    // 配置 loader
    module: {
        // 配置规则
        rules: []
    },
    // 配置 plugin
    plugins: [
        // 自动生成html文件的插件
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.join(__dirname, './public/index.html')
        }),
        // 自动清除 dist 目录插件
        new CleanWebpackPlugin(),
        // 配置 vue loader 插件
    ],
    // 配置开启服务器的信息
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),
        },
        compress: true,
        port: 80,
    },
    performance: {
        hints: false
    }
}

按照上述配置把对应文件给创建好,如果没有文件就会报错,

安装插件 html-webpack-plugin clean-webpack-plugin

是因为 webpack.config.js 里面有用到

npm i -D html-webpack-plugin clean-webpack-plugin

配置我们的入口文件

在根目录里新建一个 src 的文件夹在里面新建一个 main.js 文件 写入js代码 然后打包后户减少

打包前
function fn() {
    console.log('孙志豪')
}
fn()

打包后 会多一个 dist 文件 把 function 去掉了
console.log('孙志豪')

在根目录里面新建一个 public 文件夹

在新建一个 index.html 输入 ! 回车 初始化
写入一个 div 为 id=“#app”

找到 package.json 文件 配置打包命令

 "scripts": {
    "build": "webpack --config webpack.config.js"
  },

然后运行打包的命令

npm run build

此时会多一个叫 dist 的文件夹

2022基于webpack从0搭建vue项目,vue2.0和vue3.0,解决了中间的报错问题。

设置启动 server 服务器

安装 server 启动的服务器

npm i webpack-dev-server -D

找到 package.json 文件 配置启动服务

  "scripts": {
    "build": "webpack --config webpack.config.js",

在webpack.config.js 配置开启服务器的信息

devServer: {
    static: {
        directory: path.join(__dirname, // 出口写什么这里就写什么
    },
    port: 8080, // 配置端口号
    open: true, // 自动打开浏览器
    hot:true, // 开启模块的热更新
},

运行服务

npm run serve

2022基于webpack从0搭建vue项目,vue2.0和vue3.0,解决了中间的报错问题。

安装loader

webpack css 样式 引入报错 和 scss 语法错误

2022基于webpack从0搭建vue项目,vue2.0和vue3.0,解决了中间的报错问题。

这些操作之前需要先安装 ‘style-loader’,‘css-loader’,‘sass-loader’
命令 npm i css-loader style-loader sass sass-loader -D

1、在src,目录下新建一个你的css文件
2、 安装完成 在 webpack.config.js 找到  rules 配置 css loader 
// 配置规则
    rules: [
        // * 解析css loader
        {
            test: /\.css$/,
            use: [
                "style-loader",
                "css-loader"
            ]
        },

        // * 解析Scss样式  注意: 配置的顺序是反着来的  从大到小 从右到左
        {
            test: /\.s[ca]ss$/, 
            use: ['style-loader', 'css-loader', 'sass-loader']
        },
 ]     

字体 图片 或者别的资源 url-loader file-loader url-loader 依赖于 file-loader

    命令 npm i url-loader file-loader -D
    安装完成 在 webpack.config.js 找到  rules 配置
       rules: [
           // * 解析图片 的 loader
            {
                test: /\.(png|jpg|gif|svg|webp|jpeg)$/,
                use: "url-loader"
            },
        ] 

安装 babel-loader 用来 让 es6代码让浏览器识别的了

命令 npm install -D babel-loader @babel/core @babel/preset-env

    rules: [
            //  * 解析es6语法 转换 es5 
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
      ] 

官网: https://www.webpackjs.com/loaders/babel-loader/

vue-loader 这样安装是 vue3.0 版本

官方网址 https://vue-loader.vuejs.org/zh/

命令 npm i vue
命令 npm install -D vue-loader vue-template-compiler

引入 vue 插件

// webpack.config.js 文件
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // * vue配置loader
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件!
    new VueLoaderPlugin()
  ]
}

配置完 在main.js里面 写入配置挂载

import {
    createApp
} from 'vue'
import App from './App.vue'// 创建app.vue 入口组件
createApp(App).mount('#app') 

安装vue 2.0 的 vue 版本配置 以及报错的解决

vue-loader 不能为 16 以上
vue 版本为 2.6.1 必须 和 vue-template-compiler 2.6.1 一致

命令 npm i vue-template-compiler@2.6.1 vue-loader@15.9.8 -D
命令 npm i vue@2.6.1

引入 vue 插件

// webpack.config.js 文件
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // * vue配置loader
      {
        test: /\.vue$/,
  plugins: [
    // 请确保引入这个插件!
    new VueLoaderPlugin()
  ]
}

找到min.js文件 配置

import Vue from "vue";
import App from "./App.vue";

new Vue({
  render: (h) => h(App),
}).$mount("#app");

创建 App.vue 文件 写代码吧小伙子

总结


以上是前端之家为你收集整理的2022基于webpack从0搭建vue项目,vue2.0和vue3.0,解决了中间的报错问题。全部内容,希望文章能够帮你解决2022基于webpack从0搭建vue项目,vue2.0和vue3.0,解决了中间的报错问题。所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。