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 处理 vue单文件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。