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