webpack 处理 vue单文件

1.安装

  

2.webpack.config.js

1.引入插件vue-loader

2.resovle.alias的设置 。用于引入vue文件

const { VueLoaderPlugin } = require('vue-loader');
const  ExtractTextPlugin=require("extract-text-webpack-plugin");
const webpack = require ("webpack");  
const webpackDevServer = require('webpack-dev-server');  

module.exports = {
  mode: 'development',
  entry:...
  output:{
      path:path.join(__dirname,"./dist"),  
      publicPath:"/vue-SPA/dist/" ,       
      filename:"main.js"
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',       
         options:{
         loaders:{
           css:ExtractTextPlugin.extract({
             use:"css-loader",
             fallback:"vue-style-loader",           
           })
         }
       }
      }
},

    plugins:[

      new ExtractTextPlugin("main.css"")       

      new VueLoaderPlugin(),                     //注意插件的引入

]} resolve: { //模块的解析 alias: { 'vue$':'vue/dist/vue.js'} //创建import过require 文件的别名。。用于引入vue文件 } //可以使用import Vue "from" vue

关于resolve的参考：点击打开链接