什么是vue-loader
这是我入职第三天的故事，在写这篇文章之前，先来看看咱们今天要讲的主角——
vue-loader，你对它了解多少？
这是我今天的回答，确实，vue-loader是webpack的一个loader，用于处理.vue文件。
.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script>和 <style>。
vue-loader 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理（比如<script>默认用babel-loader处理，<style>默认用style-loader处理），最后将他们组装成一个 CommonJS 模块，module.exports 出一个 Vue.js 组件对象。
vue-loader 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 lang 属性。例如，你可以像下面这样使用 Sass 语法编写样式：
<style lang="sass">
/* write Sass! */
</style>知道了什么是vue-loader之后，我们先来创建项目。为了快速地聊聊vue-loader，我在这里推荐用脚手架工具 @vue/cli 来创建一个使用 vue-loader 的项目：
npm install -g @vue/cli
vue create hello-world
cd hello-world
npm run serve这个过程我可以等等你们，because this might take a while…
当你在浏览器里输入localhost:8080之后，浏览器会友善地渲染出一个
Welcome to Your Vue.js App的欢迎页面。紧接着，我们需要打开你擅长的编辑器，这里我选用的是VSCode，顺手将项目导入进来，你会看到最原始的一个项目工程目录，里面只有一些简单的项目构成，还没有vue-loader的配置文件：
首先，我们需要在项目根目录下面新建一个
webpack.config.js文件，然后开始我们今天的主题。手动配置css到单独文件
说到提取css文件，我们应该先去terminal终端去安装一下相关的npm包：
npm install extract-text-webpack-plugin --save-dev先来说个简答的方法，上代码：
// webpack.config.js
