从0开始搭建vue+webpack脚手架（一）
基于多数情况下都是使用vue-cli初始化项目， 却始终未去了解其原理。从零开始搭建，可以让自己更深层次的理解框架。
首先从最基本的npm 开始， 至于安装npm 和 node就不用再赘述了，那是前端自动化开发最基本的能力。
一、初始化
1 新建项目目录， 生成package.json并创建项目基本信息。
$ npm init --yes
2. 安装基本项目依赖模块
$ npm install -S vue
$ npm install -D webpack webpack-cli webpack-dev-server
$ npm install -D vue-loader
上述依赖的功能需要注意的是
（1）webpack@4.x以上需要安装webpack-cli ， 因为webpack的cli命令已被独立分离到webpack-cli插件中
（2）安装vue-loader时会提示依赖于 css-loader和 vue-template-compiler (如下图), 只需在安装这两个依赖即可
3. 创建vue组件 src/App.vue, 入口文件src/index.js
# App.vue 1 <template>
<div id='app'>{{msg}}</div>
</template> <script>
export default {
name: 'App',
data() {
return {
msg: 'Hello world'
}
}
}
</script> <style scoped> </style>
import Vue from 'vue'
import App from './App.vue' const root = document.createElement('div')
document.body.appendChild(root) new Vue({
render: (h) => h(App)
}).$mount(root)
4. 根目录下创建webpack.config.js
var path = require('path')
module.exports = {
entry: path.join(__dirname, 'src/index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: "scripts/bundle.js"
},
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: "vue-loader"
}
]
}
]
}
}
5. 添加 package.json文件中scripts 运行打包的脚本
"build": "webpack --mode=production --progress --colors"
注意： 该处需要设定--mode，否则会报警告 production表示生产环境(打包代码自动压缩)， development表示开发环境
6. 打包项目, 报错如下。
$ npm run build
注意点： 在vue-loader@15.x之后, 必须使用VueLoaderPlugin插件， 在webpack.config.js中添加两行代码：
var path = require('path')
var VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: path.join(__dirname, 'src/index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: "scripts/bundle.js"
},
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: "vue-loader"
}
]
}
]
},
plugins: [
new VueLoaderPlugin()
]
}
再次打包，即可在根目录下生成dist目录 , 包含script/bundle.js文件
7. 接下来安装两个常用依赖
$ npm i -D clean-webpack-plugin # 在打包时删除指定为文件或目录
$ npm i -D html-webpack-plugin # 生成html入口文件
在webpack.config.js中配置, 同时在src目录下创建index.html
var path = require('path')
var VueLoaderPlugin = require('vue-loader/lib/plugin')
var htmlWebpackPlugin = require('html-webpack-plugin')
var cleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
entry: path.join(__dirname, 'src/index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: "scripts/bundle.js"
},
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: "vue-loader"
}
]
}
]
},
plugins: [
new VueLoaderPlugin(),
new cleanWebpackPlugin(['dist']),
new htmlWebpackPlugin({
template: path.join(__dirname, 'src/index.html')
})
]
}
src/index.html
<body>
<div id="root"></div>
</body>
更改index.js入口文件
import Vue from 'vue'
import App from './App.vue' new Vue({
render: (h) => h(App)
}).$mount('#root') // 不再需要创建根节点，直接将App渲染到index.html中的#root节点
至此：项目初始化已经完成，运行 $ npm run build 已经可以正常打包
二、配置静态文件及CSS预处理器
1. 安装 相关loader
$ npm i -D style-loader
$ npm i -D stylus stylus-loader
$ npm i -D url-loader
$ npm i -D file-loader
2 配置webpack.config.js的rules， 添加以下代码：
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.styl(us)$/,
use: ['style-loader', 'css-loader', 'stylus-loader']
},
{
test: /\.(jpg|jpeg|gif|png|svg)$/,
use: [
{
loader: "url-loader",
options: {
// 单位是b 500kb = 512000b
limit: 512000,
name: '[name]-[hash:8].[ext]'
}
}
]
}
需要注意的是，
（1）loader的编译是从右到左的， 所以在编译css文件时应该是先css-loader再到style-loader
（2）stylus-loader是css的预处理器，当然也可以使用less或者scss
（3）url-loader编译时会将小于 512000b（即500kb）的图片转换成base64, 当然limit的大小可以根据实际情况自己设定。
（4）如果没有安装file-loader则会在打包运行时报错找不到file-loader, 按提示安装即可
（5）stylus的test中必须是 /\.styl(us)?&/， 表示匹配的是.styl或者.stylus文件, 即可使用外部.styl文件, 也可以.vue组件内使用stylus语法，如只写/\.styl$/, 在.vue组件中使用<style lang='stylus'></style>中会出现下图二的错误。表示无法检测到stylus-loader
此时可以在index.js中引入assets下的的index.css和图片文件
## src/index.js
1 import Vue from 'vue'
import App from './App.vue' import './assets/images/01.jpg'
import './assets/styles/index.css'
new Vue({
render: (h) => h(App)
}).$mount('#root')
## src/assets/styles/index.css
1 body {
color: salmon;
background-image: url('../images/01.jpg');
}
## src/App.vue
1 <template>
<div>
{{msg}}
<img src="./assets/images/02.jpg" alt="">
</div>
</template>
打包 发现报警告如下：
以上警告表示, 建议每个输出的 文件的大小不要超过 244k。但开发环境因为包含了 sourcemap 并且代码未压缩所以一般都会超过这个大小，所以我们可以在开发环境把这个 warning 关闭。在生产环境建议打开warning或error， 有助于警告文件过大影响性能。
如要关闭警告可在webpack.config.js添加配置项 ：两个属性配置一个即可。
performance: {
hints: false, // 直接关闭警告
maxAssetSize: 50000 // 增加限制的大小
}
至此，$ npm run build打包成功 。可打开dist下的index.html， 图片和css文件正常加载。如果有小于500kb的图片，将会转为base64打包到bundle.js中，而大于500kb的图片正常输出到目录下。
接下来配置webpack-dev-server
从0开始搭建vue+webpack脚手架（一）的更多相关文章
- 从0开始搭建vue+webpack脚手架（三）
在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dis ...
- 从0开始搭建vue+webpack脚手架（二）
接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...
- 从0开始搭建vue+webpack脚手架（四）
之前1-3部分是webpack最基本的配置, 接下来会把项目结构和配置文件重新设计,可以扩充更多的功能模块. 一.重构webpack的配置项 1. 新建目录build,存放webpack不同的配置文件 ...
- windows环境下搭建vue+webpack的开发环境
前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...
- windows下搭建vue+webpack的开发环境
1. 安装git其右键git bash here定位比cmd的命令行要准确,接下来的命令都是利用git bash here.2. 安装node.js一般利用vue创建项目是要搭配webpack项目构建 ...
- element-ui和npm、webpack、vue-cli搭建Vue项目
一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...
- vue.js2.0:如何搭建开发环境及构建项目
1,安装node.js Node.js官网:https://nodejs.org/en/ 进入Node.js官网,选择下载并安装Node.js.安装过程只需要点击“下一步”即可, 如下图,非常简单. ...
- 从零开始搭建Electron+Vue+Webpack项目框架，一套代码，同时构建客户端、web端（一）
摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJ ...
- 在windows下用脚手架搭建vue环境
做了几个月vue项目,最近两个项目使用脚手架搭建的,确实用脚手架搭建方便了许多,想想以前自己手配的时候,确实是... 1.在这之前我是默认你已经使用过vue的,也默认你已经安装了node.js 2.接 ...
随机推荐
- SQL复制数据表 （select * into 与 insert into）
select * into 目标表名 from 源表名 insert into 目标表名(fld1, fld2) select fld1, 5 from 源表名 以上两句都是将 源表 的数据插入到 目 ...
- Chap8：加密货币TOP100[《区块链中文词典》维京&甲子]
根据2018年1月15日CoinMarketCap的加密货币市值排名编写,这里介绍TOP10,具体请参考<区块链中文词典>维京&甲子 01.比特币/Bitcoin/BTC 一种点对 ...
- [gdb][python][libpython] 使用gdb调试python脚本
https://devguide.python.org/gdb/ https://sourceware.org/gdb/current/onlinedocs/gdb/Python.html#Pytho ...
- P3292 [SCOI2016]幸运数字 线性基
正解:线性基+倍增 解题报告: 先放下传送门QAQ 然后这题,其实没什么太大的技术含量,,,?就几个知识点套在一起,除了代码长以外没任何意义,主要因为想复习下线性基的题目所以还是写下,,, 随便写下思 ...
- php 关于时间函数
1. 设置时区 date_default_timezone_set() 和 putenv() 让时间安全地设置就,输入如下代码: date_default_timezone_set('UTC'); / ...
- JavaWeb学习总结——文件上传和下载
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...
- 基于fiddler实现本地代理完成脚本测试
配置好fiddler以后,具体操作流程如下: 1.找到后在右边点击AutoResponder,查看,默认情况如下 勾选 2.ctrl+F 搜索 app. 关键字 ,找到后拖到右侧 3.替换本地文件 4 ...
- python小练--使用正则表达式将json解析成dict
练习python语法,自己实现了一个简单的解析json字符,存为dict字典对象. { "id":12, "name":"jack", &q ...
- Python操作rabbitmq消息队列持久化
消息队列持久化 Python操作rabbit消息队列的持久化,如下: # 创建一个名为balance的队列,对queue进行durable持久化设为True(持久化第一步)channel.queue_ ...
- 中文全文检索讯搜xunsearch安装
Xunsearch (迅搜)是一套免费开源的专业中文全文检索解决方案,简单易用而且 功能强大.性能卓越能轻松处理海量数据的全文检索.它包含后端索引.搜索服务程序和前端 脚本语言编写的开发工具包(称之为 ...