Vue单文件组件开发：Vue Loader 及其 webpack 配置

单文件开发

.vue单文件开发依赖webpack的模块机制，将template、script、style封装在单文件中，代码的组织性和可复用性得到增强。
这个模块叫做"vue-loader"，官方文档

手动配置webpack

• 安装依赖

npm i -D webpack webpack-cli webpack-dev-server
touch webpack.config.js

npm i -D css-loader
npm i -D vue vue-loader vue-template-compiler

• 编辑node项目配置文件package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My first singe page web app...",
  "private": true, // 防止意外发布
  "scripts": {
    "dev": "webpack-dev-server --host 0.0.0.0 --port 8080 --open" // 开发服务器脚本
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vue": "^2.6.11",
    "vue-loader": "^15.8.3",
    "vue-template-compiler": "^2.6.11",
    "css-loader": "^3.4.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.3"
  }
}

• 编辑配置文件./webpack.config.js