将组件拼装使用

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

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

　　案例：

　　　　目录结构

　　　　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 // 端口
   }
}

将组件拼装使用

原文：https://www.cnblogs.com/shangjun6/p/11234592.html