Laravel8使用webpack报错的解决方法
Vue-Baberrage用它来做弹幕比较容易，那么安装后启动时报错了错误，如下：
<span style="box-sizing: border-box;padding-right: 0.1px"> Compiled with some errors <span style="box-sizing: border-box;color: rgb(119, 0, 136)">in</span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">2</span>.69s</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">ERROR <span style="box-sizing: border-box;color: rgb(119, 0, 136)">in</span> ./node_modules/vue-baberrage/dist/vue-baberrage.js <span style="box-sizing: border-box;color: rgb(17, 102, 68)">1</span>:78-95</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">Module not found: Error: Can<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'t resolve '</span>timers<span style="box-sizing: border-box;color: rgb(170, 17, 17)">' in '</span>/www/swooleItem/labarrage/node_modules/vue-baberrage/dist<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">BREAKING CHANGE: webpack < <span style="box-sizing: border-box;color: rgb(17, 102, 68)">5</span> used to include polyfills <span style="box-sizing: border-box;color: rgb(119, 0, 136)">for</span> <span style="box-sizing: border-box;color: rgb(51, 0, 170)">node</span>.js core modules by default.</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">This is no longer the case. Verify <span style="box-sizing: border-box;color: rgb(119, 0, 136)">if</span> you need this module and configure a polyfill <span style="box-sizing: border-box;color: rgb(119, 0, 136)">for</span> it.</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">If you want to include a polyfill, you need to:</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">-</span> add a fallback <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'resolve.fallback: { "timers": require.resolve("timers-browserify") }'</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">-</span> install <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'timers-browserify'</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">If you don<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'t want to include a polyfill, you can use an empty module like this:</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> resolve.fallback: { <span style="box-sizing: border-box;color: rgb(170, 17, 17)">"timers"</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">false</span> }</span>
对于这个错误，大概的知道是webpack的原因，但为什么报错，我就不知道了。我所有使用的版本是Laravel8。
一，安装
npm install vue-baberrage
二，使用
位置：resources/js/app.js
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">import</span> { <span style="box-sizing: border-box;color: rgb(0, 0, 255)">vueBaberrage</span> } <span style="box-sizing: border-box;color: rgb(119, 0, 136)">from</span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'vue-baberrage'</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">use</span>(<span style="box-sizing: border-box;color: rgb(0, 0, 0)">vueBaberrage</span>)</span>
三，启动时编译错误
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(51, 0, 170)">npm</span> run dev</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)"># 报错，如上</span></span>
解决方法
第一步：编辑webpack.mix.js
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">mix</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">require</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'laravel-mix'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">mix</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">js</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'resources/js/app.js'</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'public/js'</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> .<span style="box-sizing: border-box;color: rgb(0, 0, 0)">vue</span>()</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> .<span style="box-sizing: border-box;color: rgb(0, 0, 0)">sass</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'resources/sass/app.scss'</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'public/css'</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 新增如下配置</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> .<span style="box-sizing: border-box;color: rgb(0, 0, 0)">webpackConfig</span>(<span style="box-sizing: border-box;color: rgb(0, 0, 0)">require</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'./webpack.config'</span>));</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)">~</span> </span>
第二步：创建wepack.config.js，并编辑如下内容
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">module</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">exports</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">resolve</span>: {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">fallback</span>: { <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(0, 0, 0)">"timers"</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">false</span> },</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">fallback</span>: { <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(0, 0, 0)">"timers"</span>: <span style="box-sizing: border-box;color: rgb(0, 0, 0)">require</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">resolve</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"timers-browserify"</span>) }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">};</span>
第三步：npm install
第四步：npm run dev
至此，问题解决
请登录后再评论