将组件拼装使用

　　两个插件：vue-loader 　　vue-template-compiler

　　这次我们直接在图片来说明　　看上面下载的插件，来使用 

　　vue-loader 功能将 vue 文件中的三个模块，解析和转换 vue 主件，提供了其中的  script，样式 style，以及 template，在分别交给别的模块处理

　　下载的依赖：

　　　　script：babel-loader

　　　　css 样式：less-loader　　css-loader　　style-loader

　　　　template 的解析：vue-template-compiler

　　必须要引入的插件　　vue

　　在配置 webpack.config.js 文件中，必须要引入插件　　let VueLoaderPlugin=require('vue-loader/lib/plugin'); 　　在 plugins 中 new VueLoaderPlugin()　　调用即可

　　在 new 实例的时候

　　注意：组件时候用自己的数据在自己模板中使用，组件挂在谁下面，就在谁的模板以标签的形式调用，

　　　　　留心驼峰法命名　　在标签使用中用 - 表示

　　npm 下载环境表示：

　　　　-S 生产依赖　　-D 开发依赖 

　　跟组件的灵魂：render:(fn)=>fn(App)　　// 这里的 App 代表定义最大的组件，可通过案例看到

　　案例：

　　　　目录结构

　　　　

　　　　app.html

　　　　

　　　　app.js

　　　　

　　　　app.vue

　　　　

　　　　header.vue

　　　　

 　　　　package.json

　　　　

　　　　webpack.config.js

　　　　

let path = require("path");
let Htmlwebpackplugin = require("html-webpack-plugin");
let compiler = require('vue-template-compiler');
let VueLoaderPlugin=require('vue-loader/lib/plugin');
module.exports = {
   entry: {
      app: "./src/app.js",
      main: "./src/main.js"
   },
   output: {
      filename: "[name].js",
      path: path.resolve("dist")
   },
   mode: "development", // porduction 压缩  development 未压缩
   module: {
      rules: [{
            test: /.css$/i,
            use: [{
                  loader: "style-loader"
               },
               {
                  loader: "css-loader"
               }
            ],
         },
         {
            test: /.less$/,
            use: [{
                  loader: 'style-loader',
               },
               {
                  loader: 'css-loader',
               },
               {
                  loader: 'less-loader',
               },
            ],
         },
         {
            test: /.vue$/,
            use: [
               {loader:'vue-loader'}
            ]
         },
         {
            test: /.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
               loader: 'babel-loader',
               options: {
                  presets: ['@babel/preset-env']
               }
            }
         },
         {
            test: /.(png|jpe?g|gif)$/,
            use: [{
               loader: 'file-loader',
               options: {
                  name: 'img/[name].[ext]',
               },
            }, ]
         }
      ],
   },
   plugins: [
      new VueLoaderPlugin(),
      new Htmlwebpackplugin({
         filename: "app.html", // 编译后的 html 文件
         template: "./app.html", // 编译前地 html 文件
         // minify: {
         //     collapseWhitespace: true // 将 html 文件压缩为一行
         // },
         chunks: ["app", "main"] // 依赖的 js 文件 与 entry 中的属性 保持一致
      })
   ],
   devServer: {
      open: true, //　自动打开浏览器
      contentBase: "dist", // 配置根目录
      port: 3000 // 端口
   }
}