<p dir="auto">I hope this is an easy one, my problem started when I was trying <a href="https://logaretm.github.io/vee-validate/" rel="nofollow">vee validate</a> examples for <a href="https://vuejs.org/" rel="nofollow">vue</a> on a project, everything worked fine but I was getiting a lot of warnings caused by two vue references, the one in my vendor file and one imported by vee validate on a single file vue component.</p>
<p dir="auto">Searching for a fix the one that always popped up its doing an alias to certain vue distribution, this didn’t do anything for me.</p>
<p dir="auto">As I said previously, I have a vendor file where I import vue, lodash and buefy, then an “admin.js” file where I do my vue component registration and my vue node. Out of nothing I tried to mix everything on a single file and everything was ok, no duplicate references, no warnings, etc.</p>
<p dir="auto">Apparently when everything is mixed in the same file this component ignored that vee validate vue import , so this is my question, there’s a way to mix my admin file “ignoring” the vue import from vee validate? I’m sorry if this is something to obvious on webpack but I cant get it done and I really want to understand what's happening.</p>
<p dir="auto">Im using  <code class="notranslate">vue@2.6.11</code> and <code class="notranslate">vee-validate@3.2.5</code>.</p>
<p dir="auto">This is my laravel mix file with the alias, this is laravel project.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// webpack.mix.js

const mix = require('laravel-mix');

let webpackConfig = {
    resolve: {
        alias: {
            'vue$':  path.resolve(__dirname ,'node_modules/vue/dist/vue.esm'),
        }
    }
};


mix.webpackConfig(webpackConfig)
    .js('resources/js/vendor.js', 'public/js')
    .js('resources/js/admin.js', 'public/js')
    .sass('resources/sass/vendor.scss', 'public/css')
    .sass('resources/sass/admin/admin.scss', 'public/css')
    .version();"><pre class="notranslate"><span class="pl-c">// webpack.mix.js</span>

<span class="pl-k">const</span> <span class="pl-s1">mix</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'laravel-mix'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">let</span> <span class="pl-s1">webpackConfig</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">resolve</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">alias</span>: <span class="pl-kos">{</span>
            <span class="pl-s">'vue$'</span>:  <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span> <span class="pl-kos">,</span><span class="pl-s">'node_modules/vue/dist/vue.esm'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>


<span class="pl-s1">mix</span><span class="pl-kos">.</span><span class="pl-en">webpackConfig</span><span class="pl-kos">(</span><span class="pl-s1">webpackConfig</span><span class="pl-kos">)</span>
    <span class="pl-kos">.</span><span class="pl-en">js</span><span class="pl-kos">(</span><span class="pl-s">'resources/js/vendor.js'</span><span class="pl-kos">,</span> <span class="pl-s">'public/js'</span><span class="pl-kos">)</span>
    <span class="pl-kos">.</span><span class="pl-en">js</span><span class="pl-kos">(</span><span class="pl-s">'resources/js/admin.js'</span><span class="pl-kos">,</span> <span class="pl-s">'public/js'</span><span class="pl-kos">)</span>
    <span class="pl-kos">.</span><span class="pl-en">sass</span><span class="pl-kos">(</span><span class="pl-s">'resources/sass/vendor.scss'</span><span class="pl-kos">,</span> <span class="pl-s">'public/css'</span><span class="pl-kos">)</span>
    <span class="pl-kos">.</span><span class="pl-en">sass</span><span class="pl-kos">(</span><span class="pl-s">'resources/sass/admin/admin.scss'</span><span class="pl-kos">,</span> <span class="pl-s">'public/css'</span><span class="pl-kos">)</span>
    <span class="pl-kos">.</span><span class="pl-en">version</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This is my vendor file where I import vue, lodash and buefy.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// vendor.js

require('./bootstrap');

import Vue from 'vue';
window.Vue = Vue;

import _ from 'lodash';
Object.defineProperty(Vue.prototype, '_', { value: _ });

import Buefy from 'buefy';
Vue.use(Buefy,{
    defaultIconPack: 'fa',
    defaultDayNames: [&quot;D&quot;, &quot;L&quot;, &quot;M&quot;, &quot;M&quot;, &quot;J&quot;, &quot;V&quot;, &quot;S&quot;],
    
});"><pre class="notranslate"><span class="pl-c">// vendor.js</span>

<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./bootstrap'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-v">Vue</span> <span class="pl-k">from</span> <span class="pl-s">'vue'</span><span class="pl-kos">;</span>
<span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">Vue</span> <span class="pl-c1">=</span> <span class="pl-v">Vue</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-s1">_</span> <span class="pl-k">from</span> <span class="pl-s">'lodash'</span><span class="pl-kos">;</span>
<span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">defineProperty</span><span class="pl-kos">(</span><span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">,</span> <span class="pl-s">'_'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-s1">_</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-v">Buefy</span> <span class="pl-k">from</span> <span class="pl-s">'buefy'</span><span class="pl-kos">;</span>
<span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">use</span><span class="pl-kos">(</span><span class="pl-v">Buefy</span><span class="pl-kos">,</span><span class="pl-kos">{</span>
    <span class="pl-c1">defaultIconPack</span>: <span class="pl-s">'fa'</span><span class="pl-kos">,</span>
    <span class="pl-c1">defaultDayNames</span>: <span class="pl-kos">[</span><span class="pl-s">"D"</span><span class="pl-kos">,</span> <span class="pl-s">"L"</span><span class="pl-kos">,</span> <span class="pl-s">"M"</span><span class="pl-kos">,</span> <span class="pl-s">"M"</span><span class="pl-kos">,</span> <span class="pl-s">"J"</span><span class="pl-kos">,</span> <span class="pl-s">"V"</span><span class="pl-kos">,</span> <span class="pl-s">"S"</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">And this is my admin file where I do my component registration and my vue node.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// admin.js

Vue.component('create-event-form', require('./components/admin/event/CreateEventForm.vue').default);
Vue.component('show-event', require('./components/admin/event/ShowEvent.vue').default);
Vue.component('edit-event-form', require('./components/admin/event/EditEventForm.vue').default);

...

var root = new Vue({
    el: '#admin-root',
});"><pre class="notranslate"><span class="pl-c">// admin.js</span>

<span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">component</span><span class="pl-kos">(</span><span class="pl-s">'create-event-form'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./components/admin/event/CreateEventForm.vue'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">component</span><span class="pl-kos">(</span><span class="pl-s">'show-event'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./components/admin/event/ShowEvent.vue'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">component</span><span class="pl-kos">(</span><span class="pl-s">'edit-event-form'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./components/admin/event/EditEventForm.vue'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

...

<span class="pl-k">var</span> <span class="pl-s1">root</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Vue</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">el</span>: <span class="pl-s">'#admin-root'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">小程序打包多个pages入口文件，提取公共引入的文件</p>
<p dir="auto">module.exports = {<br>
entry,<br>
output: {<br>
filename: '[name].js',<br>
publicPath: '/',<br>
path: resolve('dist'),<br>
},<br>
resolve: {<br>
modules: [resolve(__dirname, 'src'), 'node_modules'],<br>
alias: {<br>
'src': resolve(__dirname, './src'),<br>
}<br>
},<br>
mode:"production",<br>
target:"node-webkit",<br>
module: {<br>
rules:[<br>
{<br>
test:/.(png|jpe?g|gif|svg)(?.*)?$/,<br>
use:['url-loader',<br>
{<br>
loader: 'image-webpack-loader',// 压缩图片<br>
options: {<br>
bypassOnDebug: true,<br>
}<br>
}<br>
]<br>
}<br>
]<br>
},<br>
plugins: [<br>
new webpack.DefinePlugin({<br>
'process.env': "development"<br>
}),</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="//清除dist文件下的打包文件 官方有误
new CleanWebpackPlugin(),

new UglifyJsPlugin({
    include:/src/,
    sourceMap: true
}),

  /* copy静态文件 */
new CopyWebpackPlugin([
    {
      from: __dirname + '/src/images',
      to: __dirname + '/dist/images'
    },
    {
      from: __dirname + '/src/components',
      to: __dirname + '/dist/components',
      ignore: ['*/*.xml']
    },
    {
      from: '**/*.wxml',
      to: 'pages',
      context: path.join(__dirname, 'src/pages')
    },
  ], {
    ignore: [
      '**/*.wxss',
      '**/*.js'
    ]
  }),
  new CopyWebpackPlugin([
    {
      from: '**/*.min.js',
      to: 'utils',
      context: path.join(__dirname, 'src/utils')
    },
  ]),"><pre class="notranslate"><code class="notranslate">//清除dist文件下的打包文件 官方有误
new CleanWebpackPlugin(),

new UglifyJsPlugin({
    include:/src/,
    sourceMap: true
}),

  /* copy静态文件 */
new CopyWebpackPlugin([
    {
      from: __dirname + '/src/images',
      to: __dirname + '/dist/images'
    },
    {
      from: __dirname + '/src/components',
      to: __dirname + '/dist/components',
      ignore: ['*/*.xml']
    },
    {
      from: '**/*.wxml',
      to: 'pages',
      context: path.join(__dirname, 'src/pages')
    },
  ], {
    ignore: [
      '**/*.wxss',
      '**/*.js'
    ]
  }),
  new CopyWebpackPlugin([
    {
      from: '**/*.min.js',
      to: 'utils',
      context: path.join(__dirname, 'src/utils')
    },
  ]),
</code></pre></div>
<p dir="auto">],<br>
// 将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk 官方有误<br>
optimization: {<br>
splitChunks: {<br>
cacheGroups: {<br>
commons: {<br>
name: "commons",<br>
chunks: "initial",<br>
minChunks: 2<br>
}<br>
}<br>
}<br>
},<br>
};<br>
node  v12.6.2<br>
macOS  v10.14.5<br>
webpack v4.43.0</p>