看过我之前写的博客的人应该知道，我一直都是laravel-mix的忠实粉丝，关于它的文章有好几篇。每次提到laravel-mix，就更大方了。然而，就在一个月前，我决定停止使用它，转到webpack-encore阵营。

至于为什么放弃laravel-mix，主要原因是其维护状况令人担忧，不仅更新节奏缓慢，而且许多问题悬而未决很长时间。更重要的是，作者似乎把很多bug寄托在webpack5的希望上，即使有热心的人PR，一般也会关掉，然后回答说：“dei哥，这个坑等webpack5出来就好了。之前试过，没修好。我想你应该在这里填坑，所以保持安静。然而，正是这个问题最终让我下定决心寻找一个替代方案。细读源代码，发现相关功能都依赖于extract-text-webpack-plugin，而且这个包在webpack4发布后不久就被声明放弃了(现在它的官方仓库已经设为存档)，但是作者好像根本没有使用mini-css-extract-plugin的意思。

俗话说，爱深，责任急。在对laravel-mix表示失望后，我发现了另一个我已经开始了很长时间webpack-encore包。虽然我已经开始了很长时间，但我以前从未尝试过，可能是因为我更喜欢laravel-mix。但是，这一次，我不想尝试。试了一下，觉得很对不起对方。

Webpack-encore是Symfony的官方前端集成搭建工具，也是基于Webpack的，但是它的API设计更友好，文档也更完善。当然，关键是坑少.从阅读文档开始，只需要几个小时就可以将一个项目从laravel-mix迁移到webpack-encore，而且这个过程非常顺利。我迁移的项目是一个laravel项目，所以让我们在下面分享它，如果我们在Laravel项目中使用webpack-encore而不是laravel-mix。

#安装依赖项

首先当然是安装依赖性

纱线添加-D @symfony/webpack-encore

需要注意的是，webpack-encore本身并不像laravel-mix那样依赖于vue-tempplate-compiler之类的包，所以如果在自己的项目中使用这些包，需要在自己的项目中手动安装。

#配置webpack

在项目根目录新建一个webpack.config.js文件，在里面配置webpack-encore函数(其实最后也是一个标准的webpack配置文件)，以最基础的游戏玩法为例。

const Encore=require(@ symfony/web pack-Encore)

再来一个!

//存储已编译资产的目录。setOutputPath('public/js/')

web服务器用来访问输出路径的公共路径。setPublicPath('/js ')

//仅用于CDN或子目录部署

//.setManifestKeyPrefix('build/')

/*

* ENTRY CONFIG

*

*为应用的每个“页面”添加1个条目

*(包括每页包含的内容，如“应用”)

*

*每个条目将生成一个JavaScript文件(例如app.js)

*和一个css文件(比如app.css)如果你JavaScript导入CSS。

*/.addEntry('app '，'。/resources/js/app . js’)

//将需要一个额外的runtime.js脚本标记

//但是，您可能想要这样，除非您正在构建一个单页应用程序。enableSingleRuntimeChunk()。cleanupOutputBeforeBuild()。enableSourceMaps(！Encore.isProduction())

//启用散列文件名(例如app.abc123.css)。启用版本控制(Encore.isProduction())。enableVueLoader()。enableSassLoader(选项={

options . implementation=require(' sass ')

})

//取配置，然后修改！

const config=Encore . GetWebPackConfig()

//导出最终配置

module.exports=配置

#添加php助手函数

Laravel自带mix()函数引用mix编译的资源。同样，syfony也有这样的功能，比较方便。为此，你需要自己在Laravel项目中实现这两种方法。以下是参考symfony中的相关源代码改写的，可能逻辑上并不完美，但是根据你自己一个多月的使用情况来看，他们表现的还是不错的。

使用照明\支持\ html字符串；

/**

* @param string $entryName

* @返回HtmlString

*/

函数encore _ entry _ link _ tags(StrIng $ EntryName): HTMl StrIng

{

$ EntryPointsFile=public _ path(' js/EntryPoints。JSON’)；

$ JSON结果=JSON _ decode(file _ get _ contents($ Entrypointsfile)，true)；

if(！array_key_exists('css '，$ JSonresult[' entry points '][$ entryName]){

返回空

}

$ tags=array _ map(function($ item){

返回“link rel=”样式表href=' ' .$item ./';

}，$ JSonResult[' entry points '][$ entryName][' CSS '])；

返回新的HtmlString(内爆('，$ tags))；

}

/**

* @param string $entryName

* @返回HtmlString

*/

函数encore _ entry _ script _ tags(StrIng $ EntryName): HTMl StrIng

{

$ EntryPointsFile=public _ path(' js/EntryPoints。JSON’)；

$ JSON结果=JSON _ decode(file _ get _ contents($ Entrypointsfile)，true)；

if(！array_key_exists('js '，$ JSonresult[' entry points '][$ EntryName]){

返回空

}

$ tags=array _ map(function($ item){

return 'script src=' ' .$item ./script '；

}，$ JSonResult[' entry points '][$ EntryName][' js '])；

返回新的HtmlString(内爆('，$ tags))；

}

# 使用encore_entry_link_tags和encore_entry_script_tags引用编译的前端资源

在模板里使用前面添加的助手函数引用资源，你会发现它比Laravel自带的混合()函数更方便，只需要一个函数，就可以自动引入供应商。射流研究…和app.js了。

！声明文档类型

html lang=' { { app()-GetLocale()} } '

头

！-必需的元标签-

meta charset='utf-8 '

meta name=' viewport ' content=' width=device-width，initial-scale=1，shrink-to-fit=no '

！-CSRF托肯-

meta name=' csrf-token ' content=' { { csrf _ token()} } '

标题{ { config(' app。名称')} }/标题

！- app.css -

{ { encore _ entry _ link _ tags(' app ')} }

/head

身体

div id='app'/div

{ { encore _ entry _ script _ tags(' app ')} }

/body

/html

# 修改package.json中的脚本（脚本)

因为laravel项目默认package.json中发展等相关的脚本都是使用laravel-mix的，为了方便日常开发，现在要对它们进行一些调整，改用webpack-cocore。调整后大致如下，你也可以根据自己实际应用情况进行其它调整

脚本' : {

dev': 'npm运行开发，

开发' : ' cross-ENV NODE _ ENV=development encore dev '，

手表' : ' NPM跑步发展-手表'，

观察投票： 'npm运行观察-观察投票，

hot ' : ' encore dev-server-port=9001-hot '，

产品： 'npm运行生产，

生产： '交叉-ENV NODE _ ENV=生产再来一个!生产'

},

# 运行脚本，愉快撸病菌

做完前面的这些步骤之后，在终端执行纱线变热，浏览器中输入项目绑定的域名（如app.test)，就可以体验方便高效的HMR开发了。

# 后记

使用webpack-encore已经快两个月了，这期间总体说来相当顺利，小坑虽然有，但没什么大坑。去开源代码库上提问题，维护成员基本上都很友善耐心，几个小时就会有回复。这种态度也让我对它更加放心了，相信它会折腾得越来越好。虽然webpack-encore是作为Symfony默认集成工具来设计的，但这并不妨碍它在Laravel中发挥强大威力。

相比于laravel-mix，encore的应用程序接口以及一些默认配置方面考虑得更为科学和全面，想要配置真空装载机或者ts-装载机之类的，只需要调用相应的方法。另外还有点让我先惊讶的是，他们竟然对watchOptions。已忽略的默认值也考虑到了，默认忽略/node_modules/，降低中央处理器占用。当然，更为重要的是，mix4里因为一些病菌而无法使用的功能，在再来一个！里却正常，如动态导入。

总之，如果你已经发现了laravel-mix的种种不足但又苦于没更好选择的话，不妨试试webpack-encore，相信你会对它爱不释手。