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的参考：点击打开链接

最后

以上就是淡淡煎饼最近收集整理的关于webpack 处理 vue单文件的全部内容，更多相关webpack内容请搜索靠谱客的其他文章。