不使用脚手架建立vue项目

咱们先来用 npm init 来初始化项目

由于咱们用到了vue以及webpack，因此咱们须要将这两个依赖包安装一下，除了这些呢，还有段落标题中的vue-loader，这个就是为了用webpack加载.vue文件，并将它编译成浏览器能认识的js文件

安装vue-loader的同时须要再安装

而后新建一个src文件夹 用来存放源文件，再新建app.vue模板文件

app.vue代码

如何让浏览器识别vue文件呢？那就须要webpack了

---

配置webpack

咱们工程总得有个入口文件，让浏览器去访问，让webpack去打包并输出。如今就来配置webpack的入口和出口。

在src目录下新建一个main.js的文件做文工程的入口文件。
代码内容：

配置完入口后就要配置出口了。咱们新建一个webpack.config.js，在里面里配上entry入口和out出口，表示webpack文件会将将entry路径下的文件，打包到out的路径

以上就是作了这样一件事，将src下的main.js文件以js的形式打包到dist目录下的bundle.js中去。或许有人会以为如今项目里面尚未dist目录和bundle.js文件，程序没法顺利输出。实际上，out属性中定义的路径若是没有的话，webpack会自动建立的

打开package.json文件添加一句:

webpack --config webpack.config.js

有使用过脚手架的都知道npm run build 这句话，这里添加的这个指令，就是咱们在终端输入npm run build以后webpack帮咱们干的一些事情。而webpack --config webpack.config.js这句的意思就是webpack去帮咱们执行咱们新建的webpack.config.js文件

如今先试一下执行npm run build，而后接着输入yes就行了

安装后咱们再npm run build一次，就会出现已报错

这个错误是告诉咱们，须要为app.vue这个文件声明一个loader，由于webpack只支持js类型的文件，像这种vue文件是不支持的，因此咱们要使用一些工具，来帮助它认识超出它理解范畴的语法。这个时候就须要Module了

---

Module

在webpack.config.js里添加module配置项

好添加完成以后，再次执行 npm run build 指令。

好的又报错了，这是要咱们安装vue-template-compiler依赖
输入指令npm i vue-template-compiler

同时咱们还要安装依赖style-loader来解析css
npm i style-loader

webpack并无处理css的能力，因此咱们还须要在moudle添加rules配置项，以下

配置后咱们再次执行 npm run build 指令。这一次终于成功了

---

webpack配置项目加载各类静态资源及css预处理器

1. 静态资源

在上面，咱们接触了css样式加载

接下来咱们要配置加载图片了。咱们加载图片用到的loader叫‘url-loader’,它的做用是将咱们的图片转换成一个base64的字串存放于咱们打包生成的js里面，而不是从新生成一个文件。对于一些小的文件，几kb的文件能够帮助咱们减小过多的http请求。那么url-loader其实封装了咱们的file-loader，file-loader实际上是将文件进行处理后换个名字存放于另外一个地方。那么咱们先看下配置：

咱们这里一样使用的use属性，不一样的是数组里面使用的对象，由于咱们对图片还须要进行一些更细化的配置，像图片的大小(limit)，文件名称(name)有时都是须要进行配置的，因此这里使用了对象。固然，咱们须要把使用到的loader安装一下。

npm i url-loader file-loader

接下来咱们新建一个assets目录，而后放几张图片进去，并同时新建一个css目录新建一个test样式

css代码：

而且将咱们项目的入口文件添加几行代码：

咱们如今执行一下npm run build 指令，能够看到webpack将图片打包成base64字串存放于js中，而且从新生成了新的文件

打开bundle.js

图片被编译成了base64字串

2. css预处理

在这里咱们用stylus处理器，安装命令。注意记得安装stylus-loader

npm i stylus-loader stylus

新建一个stylus文件

而后将这个styl文件在入口文件中引用进来

接着咱们就能够编译一下，继续执行npm run build 指令编译

咱们以前写的font-size成功编译在bundle.js里面了

---

webpack配置webpack-dev-server

这个包是我们在开发环境用的包处理工具，咱们这里先install这个包。
npm i webpack-dev-server

而后再package.json配置
"dev": "webpack-dev-server --config webpack.config.js"

添加完dev指令后须要到webpack.config.js下修改一部份内容来专门适应咱们的开发环境。接下来咱们须要区分全局的一个环境，很容易就想到需设置一个全局的环境变量来作区分控制，咱们在build指令后面添加代码

注：咱们若是不想区分不一样系统，写一套代码来适应多个系统，须要安装cross-env模块，并使用他

这里完成以后咱们就能够在webpack.config.js文件里面进行判断了。

webpack.config.js文件里面进行判断了

overlay属性是在咱们编译的过程当中可以让任何的错误都显示到网页上面。最后咱们加完了这些基础的配置以后回过头来发现，咱们好像配置的只是js、css、img文件，没有html页面去容纳它们。这个时候咱们用到一个webpack的一个插件html-webpack-plugin,咱们照样来安装一下它：npm i html-webpack-plugin

这里咱们用到了webpack，因此须要将 webpack 这个变量引用进来。

到这里咱们基本的配置就完成了，最后须要了解一下webpack.DefinePlugin，咱们在代码中的plugin里添加：

说到这里，理论上咱们已经完成的本地开发环境的编译