2 webpack 4 加vue搭建开发环境最终配置
1 package.json
{
"name": "c",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-runtime": "^6.26.0",
"css-loader": "^1.0.1",
"extract-text-webpack-plugin": "^3.0.2",
"mini-css-extract-plugin": "^0.4.5",
"style-loader": "^0.23.1",
"vue-hot-reload-api": "^2.3.1",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {
"vue": "^2.5.17"
}
}
2 webpack.config.js
//
var path=require("path"); //var extractTextPlugin=require('extract-text-webpack-plugin');
var extractTextPlugin=require('mini-css-extract-plugin');
const VueLoaderPlugin=require('vue-loader/lib/plugin'); var config = {
mode:'development',
entry:{
//配置的单入口,webpack会从main.js文件开始工作
main:'./main'
}, output:{ //打包后文件的输出目录
path:path.join(__dirname,'./dist'),
//指定资源文件引用的目录
publicPath:'/dist/',
//用于指定输出文件的名称
filename:'main.js' }, module:{ //再module对象的rules属性可以指定一系列的loeders,每一个loader都必须包含test和use两个选项
//此配置的意思:
//当webpack编译过程中遇到require和import语句导入一个后缀名为.css的文件时
//,先将他通过css-loader转换,再通过style-loader转换,然后继续打包
rules:[ /*{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
}*/
{
test:/\.vue$/,
loader:'vue-loader',
}, {
test:/\.css$/,
use:[
extractTextPlugin.loader,
'css-loader',
]
}, {
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/
},
]
}, plugins:[
new VueLoaderPlugin(),
//重命名提取后的css文件
new extractTextPlugin({ filename: "[name].css",
chunkFilename: "[id].css"
}), ] }; module.exports = config 3 最终运行npm run dev能够处理.vue文件
大家可以结合上篇笔记参考dev环境的配置
2 webpack 4 加vue搭建开发环境最终配置的更多相关文章
- 二、Electron + Webpack + Vue 搭建开发环境及打包安装
目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack 搭建开发环境及打包安装 ------- 打包主进程 Electron + ...
- 一、Electron + Webpack + Vue 搭建开发环境及打包安装
目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack 搭建开发环境及打包安装 ------- 打包主进程 Electron + ...
- vue搭建开发环境
windows下搭建vue开发环境 一.安装node.js 安装 vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js环境,所以首先要安装node.js. n ...
- vue的开发环境搭建命令加图解
vue的开发环境的搭建 不管什么软件我们都要去官网下载安装,这是作为专业程序员的安全意识. 1.安装node.js 官方下载的页面:点击这里 大约展示的页面是这样子的!我们演示是windows 64位 ...
- windows下vue.js开发环境搭建教程
这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...
- vue.js2.0实战(1):搭建开发环境及构建项目
Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...
- 前端开发 Vue -1windows环境搭建Vue Node开发环境
解决几个疑问: 想学习下vue.js,我理解的它是一个前端的框架,主要作用是对数据的处理,和juqery类似,所以不太理解为什么要在nodejs中npm install vue呢?在html文件中引入 ...
- Vue/Element-ui 安装搭建开发环境(一)
Element 是饿了么全段开发团队推出的一套基于 vue.js2.0 的 PC Web 端开发框架. Element 中文文档:https://element.eleme.cn/#/zh-CN 1. ...
- webpack环境搭建开发环境,JavaScript面向对象的详解,UML类图的使用
PS:因为所有的设计模式都是基于面向对象来完成的,所以在讲解设计模式之前先来过一下面向对象都有哪些知识点 搭建开发环境 初始化npm环境 下载安装nodejs安装即可,nodejs自带npm管理包,然 ...
随机推荐
- ISO/IEC 9899:2011 条款5——5.1.2 执行环境
5.1.2 执行环境 1.定义了两个执行环境:独立式(freestanding)以及宿主的(hosted).在这两种情况下,当一个派定的C函数被执行环境调用时,程序就启动.所有具有静态存储周期的对象应 ...
- lua 求table长度和判断空
local table_a = {} 判断一:(错误方法) if table_a == {} then --你会发现你怎么也进不来 条件判断始终返回false,为什么会这样呢? ...
- 【微信小程序】wx.navigateBack() 携带参数返回
第一个页面: go_pick_time:function(e){ var that = this; var type = e.currentTarget.dataset.type; wx.naviga ...
- tp5.1 where 时间查询
$where_time = []; if ($_GET['s_time'] && !isset($_GET['e_time'])){ $where_time = ['add_time' ...
- LINQ语法详解
我会通过一些列的实例向大家讲解LINQ的语法. 先创建一个Person类,作为数据实体 public class Person { public string Name { get; set; } p ...
- 【Leetcode_easy】806. Number of Lines To Write String
problem 806. Number of Lines To Write String solution: class Solution { public: vector<int> nu ...
- oracle-复制表结构和表数据
1.复制表结构和表数据 create table table_new as select * from table_old 2.复制表结构 create table table_new as sele ...
- wordpress可以自定义获取相关文章的代码
将下面的代码插入functions.php中 获取相关文章的策略: 手动指定 > 标签 >分类 > 随机 //相关文章 function add_related_posts($con ...
- react做的react-redux购物车
### 1. 创建项目 create - react - app 项目名(shop) ### 2. 进入项目,下载redux,react-redux cnpm install redux ...
- mysql学习之join从句
一.join从句共有5种类型 内连接(inner join) 全外连接(full outer join) 左外连接(left outer join) 右外连接(right outer join) 交叉 ...