webpack 4+ vue-loader 配置 (完善中...)
写的demo,clone下来后,npm run dev即可,(此demo并未加入router)
可能会由于版本问题,配置会有些许改动,暂时都是可用的
具体配置文件在webpack.config.js
配置步骤的话可以查看webpack官方文档指南,非常详细
https://www.webpackjs.com/guides/
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path')
const webpack = require('webpack') function join(...args) { // ...args 出现在参数中叫做 rest 参数,它是把所有剩余参数放入一个数组
return path.join(__dirname, ...args) // 出现在非函数参数的位置,...args 表示展示操作符,表示将数组展开,元素一个一个的摆放到这里
} module.exports = {
mode: "development",//可提高编译速度
devtool: 'inline-source-map',
devServer:{
contentBase:'./dist',
hot:true
},
entry: join("./src/main.js"),
output: {
path: join(__dirname, "dist"),
filename: "bundle.js"
},
plugins: [
new VueLoaderPlugin(),//https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E9%85%8D%E7%BD%AE
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: join('./index.html'),
})
],
module: {
rules: [{
test: /\.text$/,
use: ['raw-loader']
},
{
test: /\.css/,
use: [
'style-loader',
'css-loader'
]
}, {
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}, {
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
}, {
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader' // less-loader 依赖于 less
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']//注意版本问题 https://www.npmjs.com/package/babel-loader
}
}
},{
test:/\.vue$/,
use:['vue-loader']// 依赖于 vue-template-compiler,需要额外安装
}
]
}, }
用到的包及版本package.json
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"build": "webpack",
"predev":"npm install",
"dev": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"less": "^3.7.0",
"less-loader": "^4.1.0",
"raw-loader": "^0.5.1",
"style-loader": "^0.21.0",
"vue-loader": "^15.2.4",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.16.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"vue": "^2.5.16"
}
}
这里有个问题
main.js文件
https://cn.vuejs.org/v2/guide/installation.html
官方文档中有对各种vue版本的解释,使用场景
这里会涉及到使用template加载组件还是render形式
webpack 4+ vue-loader 配置 (完善中...)的更多相关文章
- Windows下php,mysql,apache相关安装与配置,完善中…
PHP 的安装 由于php是一个zip文件(非install版),安装较为简单解压就行.把解压的 php5.2.1-Win32重命名为 php5.并复制到安装盘目录下.例如安装路径为 c:\php5 ...
- vue 快速入门 系列 —— vue loader 上
其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- webpack构建vue项目(再谈配置)
webpack配置起来确实麻烦,这不,之前用刚配好了vue1+的版本,结果在(部分)安卓机上测试,发现存在开启热加载(dev-server)的情况下不能识别vue语法的问题,试了很多方法,都没能很好的 ...
- webpack构建vue项目(配置篇)
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- webpack 创建vue项目过程中遇到的问题和解决方法
目录 1 webpack简介 2 webpack实现多个输入输出多个html 3 webpack 中的module下rules 下的use和loader选项 4 webpack 文件更新,如何使页面 ...
- vue --- 脚手架初始化项目中配置文件webpack.base.conf.js代码含义
'use strict' //引入node path 中间件 可以获取到 path 路径的一些信息 const path = require('path') //引入utils工具模块 utils主要 ...
- Vue学习之webpack调用第三方loader(十五)
---恢复内容开始--- 一.webpack 默认只能打包处理 JS 类型的文件,无法处理 其他的非 JS 类型的文件: 如果非要处理 非 JS 类型的文件,我们需要手动安装一些 合适 第三方 lo ...
- vscode 中 eslint prettier 和 eslint -loader 配置关系
前置 本文将探究 vscode prettier 插件 和 eslint 插件在 vscode 中的配置以及这两者对应的在项目中的配置文件的关系,最后提及 vscode eslint 插件配置与 es ...
随机推荐
- mysql数据库 删除某几个字段相同的重复记录并根据另一字段留下一条记录
1.例如Mysql数据库中表a中的记录,id=2,id=6,id=7的记录是重复的(iId,cId等多个字段相同),现在想留下id最小(id=2)或最大(id=7)的一条记录
- react动态路由以及获取动态路由
业务中会遇到点击列表跳转到详情页, 1.在index.js修改我们的跟组件 新建router2的文件 import React from 'react' import { HashRouter as ...
- Lambda表达式与函数式接口
Lambda表达式的类型,也被称为目标类型(targer type),Lambda表达式的目标类型必须是"函数式接口(functional interface)".函数式接口代表只 ...
- parallels desktop for mac安装虚拟机 之parallelsdesktop密钥 以及 parallels desktop安装win10的办公推荐可以提高办公效率
大家好我是一个老程序员了. 用惯了 mac , 平时工作都是在 mac安装虚拟机,之后就是mac 安装 win10. 因为很多办公软件 mac 都不好用,主要是跟同事沟通不方便,当然mac 的软件还 ...
- sql选择
关系型数据库遵循ACID规则 1.A (Atomicity) 原子性 原子性很容易理解,也就是说事务里的所有操作要么全部做完,要么都不做,事务成功的条件是事务里的所有操作都成功,只要有一个操作失败,整 ...
- [转]ANR问题分析指南
引言 每天收到无数的兄弟团队的同事向系统转ANR JIRA,有些一旦遇到App ANR就直接转到系统组,有些简单看一下就转到系统组帮忙看一下.如此浩瀚的JIRA,我们什么事不做也处理不过来,请每个Ap ...
- 没有显示器如何SSH连接上树莓派
1.在用读卡器烧录系统后先用Linux虚拟机连接上读卡器,修改 sudo gedit /etc/wpa_supplicant/wpa_supplicant.conf 加入 network={ ssid ...
- 清北学堂2019NOIP提高储备营DAY1
今天是第二次培训的第一天,关于NOIP的基础算法,主要内容如下: $1.枚举 $2.搜索 $3.贪心 $1.枚举: •定义: 枚举又叫做穷举,是一种基础的算法,其思路主要是:从问题中有可能的解集中一一 ...
- 20175204 张湲祯 2018-2019-2《Java程序设计》2
20175204 张湲祯 2018-2019-2<Java程序设计>2 必做课下作业MyCP 要求 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP ...
- bounding box的简单理解
1. 小吐槽 OverFeat是我看的第一篇深度学习目标检测paper,因为它是第一次用深度学习来做定位.目标检测问题.可是,很难懂...那个bounding box写得也太简单了吧.虽然,很努力地想 ...