前段学习 之 webpack 学习记录
自动化安装
1.安装node (node -v查看node版本)
2.全局安装vue-cli Npm install -g vue-cli Vue- v:查看是否安装成功 Vue list:查看可用的模板
3.创建一个基于 "webpack" 模板的新项目 Vue init webpack project-name
手动安装
怎么使用webpack 进行打包
1、npm install webpack -g
2、创建站点 mkdir webpack
3、进入站点 cd webpack
4、npm init 创建package.json 文件
5、npm install --save-dev webpack 下载node_modules文件夹
6、npm install webpack-cli --save //安装webpack脚手架
7、webpack ./src/main.js -o ./dist/bundle.js --mode development
-------------
怎样使用 webpack-dev-server
1、npm install webpack-dev-server --save-dev
2、配置 package.json
3、npm run dev
----------------------------
使用jquery
1.npm install jquery --save-dev
2.在webpack.config.js 里添加
var webpack = require('webpack'),
module.exports 里面添加
plugins: [
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery",
"window.jQuery": "jquery"
})
],
----------------------------
使用css loader
1、npm install style-loader css-loader --save-dev
2、配置 webpack.config.js
---------------------
使用bootstrap4
1.npm install bootstrap --save-dev
2.npm install popper --save-dev
bootstrap里面还有些其文件 所以在匹配loader时还需要添加
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,use: "file-loader" },
{test: /\.(woff|woff2)$/,use: "url?prefix=font/&limit=5000"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,use: "url?limit=10000&mimetype=application/octet-stream"},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,use: "url?limit=10000&mimetype=image/svg+xml"}
----------------------------
使用less-loader
1、npm install less-loader --save-dev
2、npm install less --save-dev
3、配置 webpack.config.js
-------
使用 图片 url loader
1、npm install url-loader file-loader --save-dev
2、配置 webpack.config.js
-----------
webpack 使用 .vue 文件
0.npm install -vue-s 安装
1、import Vue from 'vue'
2、创建.vue文件并引入 import login from './login.vue'
3、将组件 挂载到vue实例中
4、安装第三方 loader npm install vue-loader vue-template-compiler --save-dev
5、配置webpack.config.js中的匹配规则
6、引入 plugins
const VueLoaderPlugin = require('vue-loader/lib/plugin')
plugins:[
new VueLoaderPlugin()
],
--------------------------------
webpack 使用路由
1、安装路由 npm install vue-router -S
2、导入路由包 import VueRouter from 'vue-router'
3、安装 VueRouter Vue.use(VueRouter)
4、导入组件
5、创建路由对象 配置匹配规则
6、将路由对象 挂载到vue实例
7、前台调用
前段学习 之 webpack 学习记录的更多相关文章
- webpack 学习资料
webpack 学习资料 webpack 学习资料 网址 webpack 中文版 https://webpack.docschina.org/configuration/dev-server/
- 【原】webpack学习笔记
之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...
- webpack学习(入门基础)
webpack的学习webpack是什么?1:加载模块(将JS.sass/less.图片等作为模块来处理使用) 2:进行打包 webpack的优势?1:webpack以commonJS(JS的规范)的 ...
- Java 打印金字塔 or 打印带数字的金字塔 (Java 学习中的小记录)
Java 打印金字塔 or 打印带数字的金字塔 (Java 学习中的小记录) 作者:王可利(Star·星星) 效果图: 代码如下: class Star8 { public static void m ...
- Java 需要记得、了解的关键词 (Java 学习中的小记录)
Java 需要记得.了解的关键词 (Java 学习中的小记录) 作者:王可利(Star·星星) 总结:本次随笔,仅且拿来平时翻阅记忆用
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
- webpack学习笔记(二)-- 初学者常见问题及解决方法
这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...
- webpack学习
// 一个常见的`webpack`配置文件 const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-we ...
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
随机推荐
- 斯坦福CS224n课程作业
斯坦福CS224n作业一 softmax 作业要求如下: 解析:题目要求我们证明\(softmax\)函数具有常数不变性. 解答:对于\(x+c\)的每一维来说,有如下等式成立: \[softmax( ...
- 一致性 Hash 算法的实际应用
前言 记得一年前分享过一篇<一致性 Hash 算法分析>,当时只是分析了这个算法的实现原理.解决了什么问题等. 但没有实际实现一个这样的算法,毕竟要加深印象还得自己撸一遍,于是本次就当前的 ...
- TiDB之mac上搭建及调试技巧
此文目的 由于本人最近已经成为TiDB的粉丝,所以就开始各种研究TiDB的源码,研究源码这个事情,首先就需要在自己电脑上不断的调试及修改.TiDB本身的代码是非常容易编译和调试的,但是要把PD.TiK ...
- Nginx的“远方表哥”—Tengine
本文收录在Linux运维企业架构实战系列 今天想起当初研究nginx反向代理负载均衡时,nginx自身的upstream后端配置用着非常不舒服: 当时使用的淘宝基于nginx二次开发的Tengine, ...
- 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式(String,Hash,List,set,SetSorted )
很多小伙伴没接触过Redis,以至于去学习的时候感觉云里雾里的,就有一种:教程随你出,懂了算我输的感觉. 每次听圈内人在谈论的时候总是插不上话,小编就偷偷去了解了一下,也算是初入门径. 然后就整理了一 ...
- Properties类对于文件的读取和写入
Properties类表示一个持久的属性集.Properties可保存在流中或从流中加载.Properties对象只能加载以 .Properties 为后缀的文件(文件我创建在src下). 开始时文件 ...
- [AI开发]基于深度学习的视频多目标跟踪实现
据我目前了解掌握,多目标跟踪大概有两种方式: Option1 基于初始化帧的跟踪,在视频第一帧中选择你的目标,之后交给跟踪算法去实现目标的跟踪.这种方式基本上只能跟踪你第一帧选中的目标,如果后续帧中出 ...
- 缓存穿透,缓存雪崩,热点key及解决办法
1.穿透 穿透:频繁查询一个不存在的数据,由于缓存不命中,每次都要查询持久层.从而失去缓存的意义. 解决办法: 持久层查询不到就缓存空结果,查询时先判断缓存中是否exists(key) ,如果有直接返 ...
- 用pyinstaller打包python程序,解决打包时的错误:Cannot find existing PyQt5 plugin directories
解决方法就是用everything搜索PyQt5,找到 /Library/plugins路径下的PyQt5文件夹,将里面的dll动态库pyqt5qmlplugin.dll复制出来 按照错误提示的路径, ...
- 【Keras篇】---利用keras改写VGG16经典模型在手写数字识别体中的应用
一.前述 VGG16是由16层神经网络构成的经典模型,包括多层卷积,多层全连接层,一般我们改写的时候卷积层基本不动,全连接层从后面几层依次向前改写,因为先改参数较小的. 二.具体 1.因为本文中代码需 ...