不使用脚手架创建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里添加：

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