webpack整合 .vue 文件,集成 vue-loader

最新推荐文章于 2022-11-10 16:28:28 发布
最新推荐文章于 2022-11-10 16:28:28 发布
阅读量160 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1697752105/article/details/102851442
版权

webpack集成vue-loader

  1. 创建一个文件夹 test_webpack_vue
  2. 在 test_webpack_vue 下新建目录 src
  3. 在 src 目录下 新建文件 index.html ,内容为
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
  1. 在src下 新建文件 main.js 内容为 console.log("test");
  2. 在 test_webpack_vue 目录下,新建文件 .babelrc 内容为
{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
}
  1. 在 test_webpack_vue 目录下,新建文件 package.json 内容为
{
  "name": "test-vue-webpack",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 2198 --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "bootstrap": "^3.4.1",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.3.1",
    "style-loader": "^1.0.0",
    "url-loader": "^2.1.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  },
  "description": ""
}
  1. 在 test_webpack_vue 目录下,新建文件 webpack.config.js 内容为
//webpack是基于node进行构建的,所以支持node语法
var path = require("path");

//在内存中生成模版页面
var htmlWebpackPlugin = require("html-webpack-plugin");

//当以命令行运行webpack 或 webpack-dev-server ,工具会发现我们没有执行入口或出口文件
//这时会检查项目中的配置文件,并读取这个文件
module.exports = {
    entry: path.join(__dirname, "./src/main.js"),//入口文件
    output: {
        path: path.join(__dirname, "./dist"),//输出路径
        filename: "bundle.js"//执行输出文件的名称
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html"),//指定模版文件路径
            filename: "index.html"//设置内存中页面名称
        })
    ],
    module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            //处理css文件的规则
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
            //小于等于 limit 不进行base64编码
            {test: /\.(png|jpg|jpeg|bmp|gif)$/, use: 'url-loader?limit=43960&name=[hash:8]-[name].[ext]'},
            //处理字体文件的loader,bootstrap小图标就是使用这个
            {test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'url-loader'},
            // 配置 babel-loader 来转换高级的ES语法
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
        ]
    }
};
  1. 在 test_webpack_vue 目录下执行命令 npm init -y 在这里插入图片描述
  2. 再执行命令 npm i 在这里插入图片描述
  3. 执行 npm run dev 正确打印 test ,且不报错误 在这里插入图片描述
  4. 执行 npm i vue -S 在这里插入图片描述
  5. 在 main.js 中添加内容
import Vue from '../node_modules/vue/dist/vue.js'

new Vue({
   el:"#app",
    data:{
       info:"这是测试信息",
    }
});

在这里插入图片描述

  1. 在 index.html 的 body 标签中添加
<div id="app">
    <span v-text="info"></span>
</div>

在这里插入图片描述

  1. 执行 npm run dev ,控制台无错误 在这里插入图片描述
  2. 把 main.js 内容导入 Vue 的注释,新增一行 import Vue from 'vue' ,把 info 的内容后面加 1 , 此时 main.js 内容为
console.log("test");

//import Vue from '../node_modules/vue/dist/vue.js'
import Vue from 'vue'

new Vue({
   el:"#app",
    data:{
       info:"这是测试信息1",
    }
});
  1. 在 webpack.config.js 中的 module 后加 , ,再添加
    resolve: {
        alias: { // 修改 Vue 被导入时候的包的路径
            "vue$": "vue/dist/vue.js"
        }
    }

在这里插入图片描述

  1. 执行 npm run dev ,控制台无报错, 在这里插入图片描述
  2. 现在整合 .vue 文件,在 src 目录下创建 login.vue 内容为
<template>
    <div>
        <h1>render_我是login.vue</h1>
    </div>
</template>

<script>
</script>

<style>
</style>
  1. index.html 内容为
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <login></login>
</div>
</body>
</html>
  1. main.js 内容改为
import Vue from 'vue'
import login from './login.vue'

new Vue({
    el: "#app",
    render: diy => diy(login)
});
  1. 执行 npm i vue-loader vue-template-compiler -S
  2. 把 webpack.config.js 中的 resolve 模块注释掉,并添加了 .vue 的匹配规则,再添加内容var VueLoaderPlugin=require('vue-loader/lib/plugin'); 为了使 vue-loader 生效,再在 plugins 模块中添加 new VueLoaderPlugin(), ,修改后的 整个文件内容为
//webpack是基于node进行构建的,所以支持node语法
var path = require("path");

//在内存中生成模版页面
var htmlWebpackPlugin = require("html-webpack-plugin");

//vue-loader使用
var VueLoaderPlugin=require('vue-loader/lib/plugin');

//当以命令行运行webpack 或 webpack-dev-server ,工具会发现我们没有执行入口或出口文件
//这时会检查项目中的配置文件,并读取这个文件
module.exports = {
    entry: path.join(__dirname, "./src/main.js"),//入口文件
    output: {
        path: path.join(__dirname, "./dist"),//输出路径
        filename: "bundle.js"//执行输出文件的名称
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html"),//指定模版文件路径
            filename: "index.html"//设置内存中页面名称
        }),
        new VueLoaderPlugin(),
    ],
    module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            //处理css文件的规则
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
            //小于等于 limit 不进行base64编码
            {test: /\.(png|jpg|jpeg|bmp|gif)$/, use: 'url-loader?limit=43960&name=[hash:8]-[name].[ext]'},
            //处理字体文件的loader,bootstrap小图标就是使用这个
            {test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'url-loader'},
            // 配置 babel-loader 来转换高级的ES语法
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
            // 配置 vue-loader 来处理 .vue 文件
            { test: /\.vue$/, use: 'vue-loader' },
        ]
    },
    // resolve: {
    //     alias: { // 修改 Vue 被导入时候的包的路径
    //         "vue$": "vue/dist/vue.js"
    //     }
    // }
};
  1. 现在的项目结构是 在这里插入图片描述
  2. 执行 npm run dev ,控制台没有报错,组件正常显示 在这里插入图片描述
  3. 结合这篇文章 export default 与 export 可以设置 从 login.vue 中传数据到 main.js 接收,在控制台打印出来,在
  4. 在login.vue 内容为
<template>
    <div>
        <h1>render_我是login.vue</h1>
        <h2 v-text="login_info"></h2>
    </div>
</template>

<script>
    export default {
        // 注意：组件中的 data 必须是 function
        data()
        {
            return {
                login_info: "我是login.vue中的login_info值..."
            }
        },
        methods: {
            login_show()
            {
                console.log("我是login.vue中的login_show方法...")
            }
        }
    }
</script>

<style>

</style>
  1. 在 main.js 内容为
import Vue from 'vue'
import login from './login.vue'

new Vue({
    el: "#app",
    render: diy => diy(login),
    created()
    {
        console.log(login.data().login_info);
        login.methods.login_show()
    }
});
  1. 执行 npm run dev 在这里插入图片描述
陶攀峰
关注
Webpack4.x+Vue2.x+Vue-Loader升级开发环境
Sanford_Bella的专栏
11-12 965
最近根据项目的要求需要将Webpack从2升级到Webpack4.x,升级过程遇到很多坑 package.json文件依赖更新如下： "@babel/core": "^7.7.2", "@babel/plugin-proposal-object-rest-spread": "^7.6.2", "@babel/preset-env": "^7.7.1", ...
vue-loader+webpack项目配置
m0_37840862的博客
07-29 2602
1.项目准备 安装之前请确保安装了nodejs和npm，在命令行输入node -v查看是否安装node 在vscode终端里面这是npm的镜像仓库，会提高下面下载的速度 # 配置仓库地址 npm config set registry https://registry.npm.taobao.org # 验证是否成功命令 npm config ls 当验证命令结果如下图，则表示成功了 2.初始化项目 创建空文件夹"webpackVue"，然后用vscode打开，然后打开vscode终端 # 将项目初始化成
Vue.js入门知识day6
ganlubaba666的博客
02-23 227
webpack中url-loader的使用 使用情景 默认情况下，webpack无法处理css文件中的url地址，不管是图片还是字体库，只要是url地址，都处理不了 在webpack.config.js中的module的rules中加上匹配规则 module:{ //这个节点，用于配置所有第三方模块加载器 rules:[ {test:/...
vue-loader学习笔记
热门推荐
前端菜鸟
08-05 2万+
1：vue-loader简介vue-loader是一个webpack的loader；可以将vue文件转换为JS模块；2：vue-loader特性（1）ES2015默认支持 （2）允许对VUE组件的组成部分使用其他webpack loader;比如对< style >使用SASS（编译CSS语言），对< template >使用JADE（jade是一个高性能的模板引擎，用JS实现，也有其他语言的实现
Vue（webpack安装与使用）
qq_45260619的博客
07-10 629
总结： webpack.config.js文件内容解析： const path = require('path') //引入全局变量路径，在定义出口的时候可以用到 const webpack = require('webpack') //引入webpack const HtmlWebpackPlugin = require('html-webpack-plugin') //引入打包html文件的插件，将index.html打包到dist文件夹下 const UngliFyJsPlugin = require
vue.config.js 使用image-webpack-loader配置webpack图片压缩
qq_41309583的博客
11-10 1182
vue.config.js 使用image-webpack-loader配置webpack图片压缩
webpack和Vue.config.js中配置url-loader
qq_39441438的博客
04-19 6343
url-loader:一个用于将文件转换为 base64 URI 的 webpack 加载器。 作用：项目打包时，可以将符合条件的图片打包成base64 URL，减少http资源请求。 webpack配置： const {resolve} = require("path") module.exports = { mode:"development", entry:"./index.js", //resolve(__dirname,"src","index.js") output:{ p
纯静态引入.vue文件之http-vue-loader.js
wade3po的博客
10-21 5896
在最早之前，我做过纯静态的项目引入vue当作模板引擎，就是那种没有任何打包压缩的项目，就是单纯的引入css、js、html的项目。现在应该是很少有这样的项目了，很少不代表没有，起码我现在在撸jq的项目（现在jq贼溜）。 如果习惯了.vue文件去开发，有人就会想要直接用.vue文件当作组件。虽然我很不明白为什么，既然不是用webpack的项目，真的没必要用.vue文件，用js，直接注册组件就行，vue都提供了函数。然而，还是有这样的插件提供了用.vue文件注册组件的，那就是http-vue-loader.j
vue安装image-webpack-loader
qq_38677540的博客
04-15 1176
使用cnpm安装 cnpm install --save-dev image-webpack-loader Module build failed (from ./node_modules/image-webpack-loader/index.js): Error: Cannot find module 'gifsicle 的错误信息，这是由于webpack-image-loader没有完全拉取下来： webpack-image-loader依赖的四个图片处理库都需要拉取bin文件 "depende
用 (webpack 5 + vue-loader) 手把手构建 vue手脚架
weixin_45966674的博客
01-29 2612
首先我们找到一个空文件架 终端执行 npm install webpack webpack-cli vue vue-loader vue-template-compiler css-loader style-loader babel-loader @babel/core @babel/preset-env --sav 这里我们引入的工具分别是 webpack 今天的主角 一款优秀的前端打包工具 webpack-cli webpack提供的一个终端打包命令 vue vue的语法依赖 vue
vue-svg-loader-Webpack加载器，可让您将SVG文件用作Vue组件-Vue.js开发
05-27
vue-svg-loader webpack loader，可让您将SVG文件用作Vue组件文档-常见问题解答安装npm i -D vue-svg-loader vue-template-comp vue-svg-loader Webpack loader，可让您将SVG文件用作Vue组件文档-常见问题解答安装...
vue-jsx-hot-loader-使用JSX渲染功能为Vue.js组件启用HMR。-Vue.js开发
05-27
vue-jsx-hot-loader适用于：使用Vue的JSX渲染功能时，此加载器将启用Webpack的热模块替换。 安装npm inst vue-jsx-hot-loader适用于：使用Vue的JSX渲染功能时，此加载器将启用Webpack的热模块替换。 安装npm install...
vue的.vue文件是怎么run起来的(vue-loader)
10-17
Vue.js 是一个流行的前端框架，它的`.vue`文件是Vue组件的基础单位，这些文件通过`vue-loader`在Webpack中被处理和解析。本篇文章将深入探讨`.vue`文件的运行机制，以及`vue-loader`在其中扮演的角色。 首先，我们...
在vue中使用image-webpack-loader实例
01-21
提示：在这里url-loader 和 image-webpack-loader 不能一起使用，否则会导致图片出不来 接着找到 module: { rules: [ {}... ] } 在这里写入，一定要先写 ‘file-loader’ 才能使用 ‘image-webpack-loader’ 有...
vue-i18n-loader：用于自定义块的vue-i18n-loader
02-06
@ intlify / vue-i18n-loader 用于自定义块的vue-i18n加载程序 注意： :warning: next分支是Vue 3的开发分支！ 稳定版现已在分支中！ 状态：测试版 :star: 产品特点 i18n资源预编译 i18n自定义块 i18n资源定义 i18...
开题报告SpringBoot家具商城系统.docx
最新发布
11-02
毕业设计开题报告
Flask-2.2.3-py3-none-any.zip
11-02
Flask-2.2.3-py3-none-any.zip
编译器前端与后端设计.docx
11-02
编译原理试题
google-2.0.1.tar.gz
11-02
google-2.0.1.tar.gz
vue2项目webpack4.46.0使用 image-webpack-loader
05-26
在 Vue2 项目中使用 image-webpack-loader 需要进行以下步骤： 1. 安装 image-webpack-loader： ``` npm install --save-dev image-webpack-loader ``` 2. 在 webpack 配置文件中添加 loader： ``` module....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值