共计 2561 个字符，预计需要花费 7 分钟才能阅读完成。
我们先来用 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 里添加：
说到这里，理论上我们已经完成的本地开发环境的编译