webpack打包.vue文件
在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文件的更多相关文章
- webpack打包vue文件报错,但是cnpm run dev正常,最后我只想说:是我太笨,还是webpack4.4版本太坑
最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...
- webpack打包vue项目之后生成的dist文件该怎么启动运行
亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- 使用webpack打包js文件(隔行变色案例)
使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...
- webpack 打包html文件
webpack 打包html文件 webpack.config.js配置文件内容为: /** * loader: 1. 下载 2. 使用(配置) * plugins:1. 下载 2. 引入 3.使用 ...
- webpack配置打包vue文件
1.首先全局安装node,和npm.检查是否安装成功 2.新建一个文件下,进入该文件夹. 前先执行 npm init -y 然后就会在文件夹下出现一个package.json文件 然后执行 npm i ...
- 使用webpack打包vue工程
记得去年十月份的时候,自己在研究webpack,当时只是知道大致的用法,写了一个简单的demo,现在,经过了7个月对公司产品架构的使用,以及对vue-cli的使用,在了解了实际应用中各种需求之后,我自 ...
- webpack打包vue
一.原理 webpack 背后的原理其实就是把所有的非 js 资源都转换成 js (如把一个 css 文件转换成“创建一个 style 标签并把它插入 document ”的脚本.把图片转换成一个图片 ...
- webpack打包js文件
当输入 webpack 输入指令 npm run dev 后会自动启动一个浏览器 需要借鉴插件 open-browser-webpack-plugin 下载:npm install open-bro ...
随机推荐
- 关于win10安卓真机调试无法找到设备的问题
之前在win10系统上调试安卓设备,usb接好了,结果居然没有找到设备. 一般出现这种情况可能是电脑的驱动没装好. 于是找了驱动人生大佬来诊断,确实是少了安卓usb驱动. 正常来说用驱动人生装个usb ...
- 史上最全的spark面试题——持续更新中
史上最全的spark面试题——持续更新中 2018年09月09日 16:34:10 为了九亿少女的期待 阅读数 13696更多 分类专栏: Spark 面试题 版权声明:本文为博主原创文章,遵循C ...
- 解决VS2005打开js,css,asp.php等文件,中文都是乱码的问题
用记事本打开可以正常观看但是用VS2005编辑器打开JS,中文确实乱码. 解决办法:在VS 2005 的设置里面选择自动检测Utf-8:“工具”->“选项”->“文本编辑器”->“自 ...
- python 使用pymssql连接sql server数据库(转)
import pymssql class MSSQL: """ 对pymssql的简单封装 pymssql库,该库到这里下载:http://www.lf ...
- 鼠标右键点击弹出菜单(jQuery)
禁用浏览器默认事件,此处是兼容写法 $(document).contextmenu(function (e) { var event = e || window.event; if (event.pr ...
- [CSS] w3c 盒模型 和 IE 盒模型
- 4.移动端自动化测试-API讲解
一.前置代码 1.导入driver对象 from appium import webdriver 2.声明手机驱动对象 只有声明驱动对象我们才可以让手机完成脚本的操作 driver = ...
- docker容器里面安装php的redis扩展
docker exec -i -t php /bin/bash 进入php容器内执行:pecl install -o -f redis 修改php.ini,添加:extension=redis. ...
- mint-ui下拉加载(项目实例)
<template> <div class="share"> <div class="header"> <div cl ...
- Oracle【增删改&数据的备份】
增删改的SQL语句执行完毕后,不会立马进行数据的写入数据库(这时数据在内存中),需要手动对数据进行提交(commit),如果数据出问题,可以使用回滚.主键:非空唯一的 --在一张表中,某字段值是非空唯 ...