在webpack中配置.vue组件页面的解析(vue-loader)

结合webpack使用vue-router

在webpack中配置.vue组件页面的解析

1、运行npm i vue -S将vue安装为运行依赖;
2、运cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖;
3、运行npm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖,因为.vue文件中会写CSS样式;
4、new VueLoaderPlugin() 引入这个插件,必须的
ps:注意 引入const VueLoaderPlugin = require(‘vue-loader/lib/plugin’) ———在之前的版本中好像不需要这个插件,再看教程的时候还是跟着官方文档来 vue-loader

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//自动生成html模板,以便在多个入口文件时,不用手动修改引入的js
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = {
entry: {
app: './src/app.js',
index: './src/index.js',
main: './src/main.js',
},
devServer: {//使用观察者模式(启动一个服务器,当文件有变动时,页面立即改变)
contentBase: path.join(__dirname, "dist"),//将dist目录设置为可访问文件
compress: true,//一切服务都启用gzip 压缩
port: 9000,//指定服务器监听的端口 8080:为默认端口
hot: true,//告诉服务器,正在使用模块热替换
},
devtool: 'inline-source-map',//若有报错,报错信息会具体到某一个js文件的某一行
plugins: [//配置html-webpack-plugin
new HtmlWebpackPlugin({
title: '这个是html模板',
template: 'index.html',//配置html模板
inject:true, //是否自动在模板文件添加 自动生成的js文件链接
minify:{
removeComments:true //是否压缩时 去除注释
}
}),
new webpack.NamedModulesPlugin(),//模块热替换相关
new webpack.HotModuleReplacementPlugin(),//模块热替换相关
new VueLoaderPlugin(),// 请确保引入这个插件来施展魔法
],
output: {
filename: '[name].bundle.js',//打包后文件的名字
path: path.resolve(__dirname, 'dist'),//打包后文件的输出目录
},
module: {
rules: [
{//引入vue-loader识别.vue文件
test: /\.vue$/,
use:[
'vue-loader'
]
},
{//打包css文件(可以用import在js中引入css文件)
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{//加载图片(js或css中引入图片时)
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options:{
name: '[path][name].[ext]',//配置自定义文件模板
outputPath: '.',//配置打包后的输出目录(.代表在dist目录中生成)
}
}
]
},
{//加载字体
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader:'file-loader',
options:{
name: '[path][name].[ext]',//配置自定义文件模板
outputPath: '.',//配置打包后的输出目录(.代表在dist目录中生成)
}
}
]
},
{//加载数据之csv与tsv
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{//加载数据之xml json不用配置就可以直接加载
test: /\.xml$/,
use: [
'xml-loader'
]
}
]
}
};

package.json

{
"name": "vueOrigin",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open",
"build": "webpack",
"dev": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^2.1.1",
"csv-loader": "^3.0.2",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1",
"webpack-dev-server": "^3.3.1",
"xml-loader": "^1.2.1"
},
"dependencies": {
"vue": "^2.6.10",
"vue-router": "^3.0.6"
}
}

main.js入口文件

import Vue from 'vue';//导入vue.js
import App2 from '../app2.vue';//引入App2组件
import router from "../router/app2Router.js"; new Vue({
el:"#app2",
router: router,
template:"<App2/>",
components: { App2 },
render: h => h(App2),//将App2组件渲染在#app2元素上(.vue文件必须通过reader函数转化为函数形式渲染)
data:{},
created(){},
mounted(){},
})

index.html

<div id="app2"></div>

引入vue-router

npm i vue-router -S

在根文件下建立一个  router/app2Router.js文件

import Vue from 'vue';
import Router from 'vue-router'; Vue.use(Router); export default new Router({
routes:[
{//app2实例首页
path: '/',
name: 'App2',
component: () =>
import ('../app2.vue')
},
]
})

然后将这个router.js文件配置到vue实例里面,见上面的main.js

webpack打包.vue文件的更多相关文章

  1. webpack打包vue文件报错,但是cnpm run dev正常,最后我只想说:是我太笨,还是webpack4.4版本太坑

    最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...

  2. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

  3. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  4. 使用webpack打包js文件(隔行变色案例)

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  5. webpack 打包html文件

    webpack 打包html文件 webpack.config.js配置文件内容为: /** * loader: 1. 下载 2. 使用(配置) * plugins:1. 下载 2. 引入 3.使用 ...

  6. webpack配置打包vue文件

    1.首先全局安装node,和npm.检查是否安装成功 2.新建一个文件下,进入该文件夹. 前先执行 npm init -y 然后就会在文件夹下出现一个package.json文件 然后执行 npm i ...

  7. 使用webpack打包vue工程

    记得去年十月份的时候,自己在研究webpack,当时只是知道大致的用法,写了一个简单的demo,现在,经过了7个月对公司产品架构的使用,以及对vue-cli的使用,在了解了实际应用中各种需求之后,我自 ...

  8. webpack打包vue

    一.原理 webpack 背后的原理其实就是把所有的非 js 资源都转换成 js (如把一个 css 文件转换成“创建一个 style 标签并把它插入 document ”的脚本.把图片转换成一个图片 ...

  9. webpack打包js文件

    当输入 webpack 输入指令 npm run dev  后会自动启动一个浏览器 需要借鉴插件 open-browser-webpack-plugin 下载:npm install open-bro ...

随机推荐

  1. 关于win10安卓真机调试无法找到设备的问题

    之前在win10系统上调试安卓设备,usb接好了,结果居然没有找到设备. 一般出现这种情况可能是电脑的驱动没装好. 于是找了驱动人生大佬来诊断,确实是少了安卓usb驱动. 正常来说用驱动人生装个usb ...

  2. 史上最全的spark面试题——持续更新中

    史上最全的spark面试题——持续更新中 2018年09月09日 16:34:10 为了九亿少女的期待 阅读数 13696更多 分类专栏: Spark 面试题   版权声明:本文为博主原创文章,遵循C ...

  3. 解决VS2005打开js,css,asp.php等文件,中文都是乱码的问题

    用记事本打开可以正常观看但是用VS2005编辑器打开JS,中文确实乱码. 解决办法:在VS 2005 的设置里面选择自动检测Utf-8:“工具”->“选项”->“文本编辑器”->“自 ...

  4. python 使用pymssql连接sql server数据库(转)

    import pymssql class MSSQL:    """    对pymssql的简单封装    pymssql库,该库到这里下载:http://www.lf ...

  5. 鼠标右键点击弹出菜单(jQuery)

    禁用浏览器默认事件,此处是兼容写法 $(document).contextmenu(function (e) { var event = e || window.event; if (event.pr ...

  6. [CSS] w3c 盒模型 和 IE 盒模型

  7. 4.移动端自动化测试-API讲解

    一.前置代码 1.导入driver对象    from appium import webdriver 2.声明手机驱动对象  只有声明驱动对象我们才可以让手机完成脚本的操作    driver = ...

  8. docker容器里面安装php的redis扩展

      docker exec -i -t php /bin/bash 进入php容器内执行:pecl install -o -f redis  修改php.ini,添加:extension=redis. ...

  9. mint-ui下拉加载(项目实例)

    <template> <div class="share"> <div class="header"> <div cl ...

  10. Oracle【增删改&数据的备份】

    增删改的SQL语句执行完毕后,不会立马进行数据的写入数据库(这时数据在内存中),需要手动对数据进行提交(commit),如果数据出问题,可以使用回滚.主键:非空唯一的 --在一张表中,某字段值是非空唯 ...