从零开始的 webpack4 + vue2.x
新建文件夹 webpack-vue
安装依赖
yarn init //初始化package.json
yarn add webpack webpack-cli //添加webpack、webpack-cli
//ps:不知那个版本开始就需要安装webpack-cli了
新建index.html
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack v4</title>
</head>
<body>
<div id="root"></div>
<script src="dist/main.js"></script>
</body>
</html>
新建文件夹src,在src下新建index.js
// src/index.js
console.log('hello webpack v4');
第一次打包
//终端
webpack
你会发现目录底下多了dist文件夹里面有main.js,打开index.html 可以看到console里已经打印出了hello webpack v4,
在终端会有一个警告提示,大致意思是 没有设置mode将会使用生产模式,需要指定开发环境或者生产环境,打开dist/main.js,发现js确实是被压缩过的
//console
hello webpack v4
package.json
//package.json
...
"scripts":{
"start":"--mode development",
"build": "--mode production"
}
...
第二次打包
yarn start //开发环境
yarn build //生产环境(压缩)
webpack-dev-server
手动打开浏览器太麻烦
//终端
yarn add webpack-dev-server //添加webpack-dev-server
//修改index.html
<script src="main.js"></script>
//修改package.json
...
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
...
第三次打包
yarn start
自动打开浏览器了,
修改index.js试试
加入Vue
我们将一个一个解决问题,不会一次安装所有依赖
yarn add vue //添加依赖
在src下面新建文件夹pages,在pages里面新建app.vue文件
//app.vue
<template>
<section class="main">
<p>我来了{{name}}</p>
</section>
</template>
<script>
export default {
data () {
return {
name:"vue + webpack"
}
}
}
</script>
<style>
.main>p{
color: #000;
}
</style>
修改index.js
import Vue from 'vue'
import App from './pages/app.vue'
new Vue({
el:"#root",
render:h=>h(App)
})
//终端
yarn start
这时候可预见的报错来了,
Uncaught Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
//翻译:模块解析失败,您可能需要一个适当的加载程序来处理这个文件类型
看报错,我们一个个解决
搜索关键词,很容易发现是没有安装vue-loader,新建webpack.config.js
//webpack.config.js
module.exports = {
module:{
rules:[
{test:/\.vue$/,use:'vue-loader'}
]
}
}
vue-loader在15之后需要在webpack.config.js中当插件引入
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// ...
plugins: [
new VueLoaderPlugin()
]
}
//终端
yarn start
再次报错
Uncaught Error: Module build failed: Error: Cannot find module 'vue-template-compiler'
...
很明显,要你安装vue-template-compiler
yarn add vue-template-compiler
//终端
yarn start
继续报错
Module not found: Error: Can't resolve 'css-loader'
提示安装css-loader
yarn add css-loader
bingo! webpack4+vue2第一个项目成功运行
从js中分离css
这时候细心的你发现css被塞到head里面,我们来把css分离出来。使用webpack的插件extract-text-webpack-plugin@next
yarn add extract-text-webpack-plugin@next
在webpack.config.js中添加插件
//webpack.config.js
const ExtractTextWebapckPlugin = require('extract-text-webpack-plugin'); //引入插件
module.exports = {
module:{
rules:[
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextWebapckPlugin.extract({ use: 'css-loader' })
}
}
}
]
},
plugins:[
new ExtractTextWebapckPlugin('style.css')
]
}
index.html引入css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack v4</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="main.js"></script>
</body>
</html>
//终端
yarn build
打包完成后dist目录里面出现了main.js和style.css
处理图片
新建文件夹img,用来放图片
//app.vue
<template>
<section class="main">
<p>我来了{{name}}</p>
<img src="../img/1.jpg" alt="">
</section>
</template>
<script>
export default {
data () {
return {
name:"vue + webpack"
}
}
}
</script>
<style>
.main>p{
color: #000;
}
</style>
//终端
yarn start
//报错
./src/img/1.jpg
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
基本可以看出来是图片有问题,没有loader处理图片
file-loader与url-loader
yarn add file-loader url-loader
修改webpack.config.js
//webpack.config.js
...
rule:[
...
{
test: /\.(png|jpg|gif)$/,
use: [{ loader: 'url-loader',options: { limit: 8192 } }]
}
...
]
...
yarn start
打包成功...
webpack其余一些配置
resolve,watchOptions,devServer
//webpack.config.js
resolve: { //导入的时候不用写拓展名
extensions: [' ', '.js', '.json', '.vue', '.scss', '.css']
},
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300,//防止重复保存频繁重新编译,300ms内重复保存不打包
poll: 1000 //每秒询问的文件变更的次数
},
devServer:{
inline: true,
compress: true,
host: '127.0.0.1',
port: 2500,
historyApiFallback: true
}
原文地址:https://segmentfault.com/a/1190000014251654
从零开始的 webpack4 + vue2.x的更多相关文章
- webpack4+vue2+axios+vue-router的多页+单页混合应用框架
VUE2的单页应用框架有人分享了,多页应用框架也有人分享了,这里就分享一个单页和多页的混合应用框架吧,初现雏形,还有很多需要优化和改善的地方... 结尾有github地址. 项目结构 │ ├─buil ...
- vue+webpack4 脚手架搭建
1, vue 中 h => h(App) 的含义: //render: h => h(App) 是下面内容的缩写: render: function (createElement) { r ...
- 踩坑记之字体图标在webpack中
首先介绍一个还不错的字体图标库: font-awesome 是在发现bootstrap在npm下载后没有font包以后重新找的字体库,内容还挺丰富的,好像还有动态图,感兴趣的可以看一下 我的环境是we ...
- 不使用 vue-cli 与 vue 模版,使用 Vue2.x + webpack4.x 从零开始一步步搭建项目框架
说明 这是我根据慕课网上的一个课程 Vue+Webpack打造todo应用 过程一步步搭下来的框架,去掉了业务相关的逻辑. 项目最终的效果包括了引入vue框架:使用CSS预处理器:使用babel:引用 ...
- 用webpack4从零开始构建react脚手架
用webpack4从零开始构建react脚手架 使用脚手架 git clone git@github.com:xiehaitao0229/react-wepack4-xht.git` `cd reac ...
- 【Webpack】315- 手把手教你搭建基于 webpack4 的 vue2 多页应用
背景 前司和现司都会存在这种业务场景:有很多 H5 页面是不相关的,如果使用 SPA 的话,对于很多落地页和活动页不太友好,有一些纯前端页面加载过慢,所以就萌生了创建一个多页面 MPA 的框架. 起初 ...
- 从零开始搭建口袋妖怪管理系统(4)-借助webpack4.6工程化项目(上)
"手动是不可能手动的了,这辈子都不可能手动的了." 一.目标 上一章我们借助ngRoute,完成了口袋妖怪SPA系统的多模块导航开发,但是现在引用的东西越来越多,项目文件目录开始变 ...
- 从零开始搭建Vue2.0项目(一)之快速开始
从零开始搭建Vue2.0项目(一)之项目快速开始 前言 该样板适用于大型,严肃的项目,并假定您对Webpack和有所了解vue-loader.确保还阅读vue-loader的文档,了解常见的工作流程配 ...
- webpack4.x + vue2.x 构建前端工程化(1)
本篇文篇纯属个人笔记,实现工程化打包(用打包后的文件可以正常渲染页面),后续继续更新配置开发环境与生产环境,如果有不合理的地方还望各位指点! 不用脚手架,直接用vue和webpack搭建前端工程化项目 ...
随机推荐
- AutoLayout初战----Masonry与FDTemplateLayoutCell实践
学iOS也有几个月了.一直都是纯代码开发,菜鸟入门,到今天还处在Frame时代.刚好近期项目在提审.有点时间能够学学传说中的AutoLayout.事实上.就是android的相对布局(Relative ...
- CDHD驱动器——ServoStudio配置高创伺服速度模式不转
1. 摘要 速度模式(LED灯显示为0)时,电机不转,但是在位置模式(LED灯显示为8)却可以正常运转. 2. 设置 设置commode=1,fbitprd=1,fbitidx=-3,modmode= ...
- 在Docker Hub上你可以很轻松下载到大量已经容器化的应用镜像,即拉即用——daocloud国内镜像加速
Docker之所以这么吸引人,除了它的新颖的技术外,围绕官方Registry(Docker Hub)的生态圈也是相当吸引人眼球的地方. 在Docker Hub上你可以很轻松下载到大量已经容器化的应用镜 ...
- hdu 4123(树形dp+倍增)
Bob’s Race Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- poj3737 UmBasketella 真正的三分
之前用二分写三分的板子...现在正式写一个三分,但是也不难,就是把区间分为三段就行了.求二次函数的峰值,每次取大的区间就行了. 题干: 最近几天,人们总是设计出多功能的新东西.例如,您不仅可以使用手机 ...
- B1277 [HNOI2002]Tinux系统 树形dp
这个题bzoj上没有图,luogu上样例有问题...其实这个题代码不难,但是思考起来还是有一定难度的,其实这些题的重点都在于思考.我就不写了,洛谷上唯一的题解写的挺好,大家可以看一看. 题干: 在do ...
- 9.12NOIP模拟题
NOIP 2017 全假模拟冲刺 hkd 题目名称 Spfa 走楼梯缩小版 滑稽 题目类型 传统 传统 传统 ...
- Kafka详解与总结(三)
Kafka分片存储机制 几个kafka重要概念: Broker:消息中间件处理结点,一个Kafka节点就是一个broker,多个broker可以组成一个Kafka集群. Topic:一类消息,例如pa ...
- Jsp入门小常识
因为选修了一门信息系统的课,选择了用jsp做了一个系统.在这期间自学了jsp的一点皮毛,特与大家分享: script标签:用于向jsp中嵌入java代码块,<% // embed java c ...
- 【洛谷3648/BZOJ3675】[APIO2014]序列分割(斜率优化DP)
题目: 洛谷3648 注:这道题洛谷3648有SPJ,要求输出方案.BZOJ3675数据组数较多但不要求输出方案. 分析: 这可能是我第三次重学斜率优化了--好菜啊 这道题首先一看就是个DP.稍微推一 ...