配置开发时的前端工程(vue-loader+webpack)
首先打开终端,我们先来用 npm init 来初始化项目
E:\vue实战\vue_web>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (vue_web)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to E:\vue实战\vue_web\package.json:
{
"name": "vue_web",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes) yes
E:\vue实战\vue_web>
之后我们目录下会多一个叫package.json的文件,这个文件就是我们项目的配置文件。
我们先来安装一下包,因为我们用到了vue以及webpack,所以我们需要将这两个依赖包安装一下,除了这些呢,还有段落标题中的vue-loader,这个就是为了用webpack加载.vue文件,并将它编译成浏览器能认识的js文件,我们先来执行这样的指令,注:我们这里是demo,所以这里就不区分是否是dev-dependency了。
npm i webpack vue vue-loader
安装完成之后会出现一些waring,大家可以可看出来这个warning其实就是告诉我们在安装vue-loader的同事必须要安装css-loader,这里我们想它继续安装完成就可以了。
npm WARN vue_web@1.0.0 No description
npm WARN vue_web@1.0.0 No repository field.
这两个是我们项目初始化的时候由于都是回车回车,缺少一些描述,无需关心。
npm WARN optional SKIPPING OPTIONAL
npm WARN notsup SKIPPING OPTIONAL
这两个是告诉我们项目初始化时候哪些是可选择安装的,哪些是可以不安装的,这里我们也无需,继续执行
npm i css-loader
好,到这里,我们项目的大概的初始化工作就完成了。接下来我们就基于这样的目录,填充一下更丰富的细节。
我们在工程目录下新建一个src文件夹用来存放源文件,并新建一个app.vue的文件:
app.vue文件代码:
<template>
<div id="text">
{{text}}
</div>
</template>
<script>
export default {
data() {
return {
text: 'lrxu'
}
}
}
</script>
<style>
#text {
color: red;
}
</style>
大家都知道,浏览器其实只能够识别一些简单的文件,像js,css,html,img,font,但是如何让浏览器识别vue文件呢?
webpack配置
- 输入输出
到这其实我们应该有一些认知了,webpack其实就是一个帮我们打包的工具。接下来我们在工程目录下新建一个webpack.config.js文件。
接下来我们在新建的webpack.config.js里面做文章。我们知道webpack是用来打包的工具,我们工程总得有个入口文件,让浏览器去访问,让webpack去打包并输出。所以这个时候我们的事情来了,配置webpack的入口和出口。
在src目录下新建一个index.js的文件作文工程的入口文件。
然后我们在index.js里面写一些内容,代码中我都做了注释,大家应该一眼就能看懂
index.js:
//这是工程的入口文件
import Vue from 'vue';
import App from './app.vue';
const root = document.createElement('div')
document.body.appendChild(root)
//mount就是讲我们的App挂载到root这样一个根节点中去
new Vue({
render: (h) => h(App)
}).$mount(root)
我们这时候发现,浏览器要想运行这段代码,那是不可能的,因为浏览器不认识vue,更不认识new Vue,所以webpack要登场了。我们在webpack.config.js里配上entry入口和out出口,表示webpack文件会将将entry路径下的文件,打包到out的路径,
具体如下:
webpack.config.js:
const path = require("path");//nodejs里面的基本包,用来处理路径
//__dirname表示文件相对于工程的路径
module.exports ={
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
}
}
这里代码就不多说了,都有注释,这里卖个关子,也是经常会发生的场景,就是这里的join和resolve这两个函数的用法和区别,最好去官网看一下说明,直通车https://webpack.js.org/,英文不好的同学可以去中文官网学习都是可以的,没有关系的,看不懂的时候我也会去看中文文档。
好上面的代码就是做了这样一件事,将src下的index.js文件以js的形式打包到dist目录下的bundle.js中去。大家有疑问了,这两个目录我还没有新建呢!没有关系out属性中定义的路径如果没有的话,webpack会自动创建的,我们需要做的是就是新建src目录并添加index.js文件。那这个动作我们已经新建完成了,不记得的同学返回文章内容再看看。
这时候我们打开package.json文件添加一句:
"build": "webpack --config webpack.config.js"
应该都用过npm run build 这句话,这里添加的这个指令,就是我们在终端输入npm run build之后webpack帮我们干的一些事情,那我们这里呢这句的意思就是webpack去帮我们执行我们新建的webpack.config.js文件。注意这里我们使用webpack来执行指令,同样也可以在终端执行这段指令,但是我们要清楚在终端直接执行build后面的指令会出现一个问题,如我们在终端执行该指令,意味着使用的是全局的webpack,但是我们写在package.json文件下的话,意味着执行工程下面的局部wepackage,全局和局部可能会版本不一样,所以为了避免不必要的麻烦,我们在package.json文件下执行,也就是说使用的局部的webpack来打包。
好到这里,我们编译打包输入输出的相关配置已经完成,我们先执行一下:npm run build。可能有经验的小伙伴会发现还有一些配置没有完成,没关系,我们一步步来,带着错误把问题一个一个解决。
E:\vue实战\vue_web>npm run build
> vue_web@1.0.0 build E:\vue实战\vue_web
> webpack --config webpack.config.js
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): yes
由于我使用的是webpack4,所以这里必须要安装一下cli。这里有人就问了,哎呀不是不用cli的嘛,怎么要安装这个包。如果你有这样的想法,证明你有自己用过cli搭建过vue项目框架的一些经验。我们知道用cli脚手架搭建出来的项目结构应该是这样的:
我们这里安装这个cli包是因为webpack4之后强制要求安装的,但是我们并没有通过该工具来初始化整个工程,所以建出来的目录也是不一样的,所以大家仔细想想就明白了。好了,接下来直接yes就可以,安装完成之后,再执行一下 npm run build,有些不需要再执行,但没有关系,反正都会报错:
这个错误呢就是告诉你我们,需要为app.vue这个文件声明一个loader,因为webpack只支持js类型的文件,像这种vue文件是不支持的,所以我们要使用一些工具,来帮助它认识超出它理解范畴的语法。接下来便到了我们的module环节。
- Module
由于webpack存在这样的一个限制,我们就需要来使用一些工具,我们在webpack.config.js里添加module配置项
webpack.config.js:
const path = require("path");//nodejs里面的基本包,用来处理路径
//__dirname表示文件相对于工程的路径
module.exports ={
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{//通过vue-loader来识别以vue结尾的文件
test: /.vue$/,
loader: 'vue-loader'
}
]
}
}
好添加完成之后,再次执行 npm run build 指令。
好,又报错了,这时候的错误是告诉我使用vue-loader的方式不正确。Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,所以我们这里再来修改一下。这里会使用plugin属性,不了解的同学可以先跳过,也可以去官网查看一下这个属性的作用,这里我就先不介绍了。我们在package.config.js文件中添加VueLoaderPlugin,代码如下:
const path = require("path");//nodejs里面的基本包,用来处理路径
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//__dirname表示文件相对于工程的路径
module.exports ={
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin()
],
mode:'none',
module: {
rules: [
{//通过vue-loader来识别以vue结尾的文件
test: /.vue$/,
loader: 'vue-loader'
}
]
}
}
再次执行一次 npm run build 还会报错,哈哈,到这有人会抱怨啦,是不是没玩没了啦。不用担心,保证这个问题解决完之后就可以啦。先看错误信息
不知道大家还记不记的我在app.vue文件中用“style标签嵌入”的方的式写css样式了:
但是webpack并没有处理css的能力,所以我们还需要在moudle添加rules配置项,如下
const path = require("path");//nodejs里面的基本包,用来处理路径
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//__dirname表示文件相对于工程的路径
module.exports ={
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin()
],
mode:'none',
module: {
rules: [
{//通过vue-loader来识别以vue结尾的文件
test: /.vue$/,
loader: 'vue-loader'
},
{//通过vue-loader来识别以vue结尾的文件
test: /.css$/,
//css的处理方式不同,有嵌入在页面style标签里的,有从外部文件引入的,我们这里用use来声明
use: [
'style-loader',//接受潜在页面内部的style标签的文件。
'css-loader'
]
}
]
}
}
好了,别忘了执行一下 npm i style-loader,因为之前没有安装过这个包,否则又要报错了。这部分属于配置静态资源的部分了,本来是要放到下一章节来讲的,但是这里遇到了问题,就先介绍了。我们最后执行一下 npm run build指令,不出意外的话,应该是这样的:
我们也看到了确实生成了dist/bundle.js文件,我们可以进去简单看一下:
我们确实看到一些我们写下来的文件资源,被打包到js文件中之后的代码。好到这里,我们项目配置的部分就到这里了。接下来,我会给大家介绍一下如何在项目中使用webpack配置静态资源。