很多站长朋友们都不太清楚webpack打包php，今天小编就来给大家整理webpack打包php，希望对各位有所帮助，具体内容如下：
本文目录一览： 1、 webpack-打包优化方案 2、 Webpack前端项目打包配置 3、 webpack的打包配置-1修改版 4、 web前端打包报错 webpack 打包成功但是会报错 怎么解决 5、 webpack使用HtmlWebpackPlugin进行cdn配置 webpack-打包优化方案分析打包文件
要优化，先分析。我们先要知道到底是哪里拖慢我们的打包速度呢？
可以利用 webpack-bundle-analyzer 插件来分析我们打包后生成的文件
修改 webpack.prod.conf.js 文件
simple-progress-webpack-plugin 可以显示打包百分比
修改 webpack.prod.conf.js 文件
效果如下：
资源与依赖包的控制
通过上面进度可以看到，打包过程中，卡顿在压缩的地方过长，当项目越来越臃肿的时候，我们要需要对项目静态资源以及依赖包进行整理，
项目里面使用 ElementUI 和 Echarts 都是全部引用挂在 Vue.prototype 上，现都改为按需引用。
预处理各种文件时指定匹配目录后， webpack 解析文件时就不会循环查找其他目录，加快解析速度。
webpack 执行预处理文件时单线程的，我们可以使用 happypack 来多线程处理文件。
修改 webpack.base.js 文件
babel-plugin-dynamic-import-node 插件是使 import() 替换成 require 编译
修改 .babelrc 文件
注意 ：使用插件 build 后没有 chunk files 文件。
通过 DllPlugin 插件分离出第三方包
使用 add-asset-html-webpack-plugin 动态添加 dll.js 到 html 。
需要注意
项目经过以上优化，打包从 30 分钟，到 2 分钟不到，整体还有优化空间，可以使用其他 cdn 等优化方式。
Webpack前端项目打包配置1、安装依赖包
初始化项目为nodejs项目
另一种是在html中通过img标签的src引入，因为webpack对html支持不友好，所以需要借助插件html-webpack-plugin
第三种是借用拷贝插件，直接强行拷贝所有图片，因为本项目图片是在xslt中引用，所以采用第三种和第一种结合的方式处理图片，在plugin参数中添加
如果css是与其余的css一起打包，那么其中对fonts资源的引用路径也会自动发生变化，一定注意，是个大坑！！
webpack的打包配置-1修改版1、现在本地创建项目目录
2、然后在index.html中写入html的结构
3、想要先安装jquery，先npm init -y一下， npm install jquery -S 【项目目录安装，必须是小写的jquery，否则会报错】，在index.html引入main.js
4、在main.js中写入内容如下：
使用webpack处理一下，转换成浏览器可以识别的文件 ：
a: 先全局安装一下webpack=> npm install webpack@3.5.5 -g
b: 在终端中执行： webpack ./src/main.js【要处理的文件的目录】 ./dist/bundle.js【要输出的文件的目录以及文件名】 ，会在dist中生成一个bundle.js文件，然后在 index.html中引入的main.js文件改成 bundle.js
这样的话每次打包时候都需要执行 webpack ./src/main.js ./dist/bundle.js
c: 为了不手动指定入口和出口文件，在项目根目录中新建一个webpack.config.js（基于node的，所以** **node.js的命令都可以识别）
这样的话，就可以在终端中直接执行命令：webpack就可以直接打包了，但是还有个小问题。就是它不 会自动更新，需要手动刷新一下。下面我们就来解决这个问题。来配置webpack-dev-server
4、使用webpack-dev-server实现自动打包编译
直接安装webpack最高版本的时候，可能会遇到报错的情况，如果对于版本没有要求的话，可以降低版本：
npm install webpack@3.5.5 -D 如果还会有报错出现的话，可以试试使用cnpm安装
需要先在终端中安装webpack-dev-server：具体操作如下：
4.1 npm/cnpm install webpack-dev-server -D 出现下面的提示：【其实此步骤容易出现报错，所以呢，把webpack-dev-server版本修改为@2.9.1=>webpack-dev-server@2.9.1时，就不会报错】
4.2 npm/cnpm install webpack -D 【此步骤也是容易出错的，所以安装的时候要和上边的版本保持一致，webpack@3.5.5版本】
4.3 需要在package.json中配置dev
最后直接执行：npm run dev运行成功，但是需要注意的是此时打包成的bundle.js文件不是磁盘中存在bundle.js文件，而是一个与src dist node_module同级的看不见的文件，在index.html引入的路径也要修改以下=》<script src="/bunlde.js"></script>
此时，正常打包，但是不自动打开浏览器
发布出来，方便自己查看，有什么不对的地方，希望留言纠正修改。（程序员菜鸟一枚）
web前端打包报错 webpack 打包成功但是会报错 怎么解决web前端打包报错 webpack 打包成功但是会报错解决方法如下：
1.具体看日志：This is most likely a problem with the SHOP.BM package。
2.另外，可以把node环境版本升级到新版本
webpack使用HtmlWebpackPlugin进行cdn配置其中build文件夹中的webpack.prod.conf.js是我们主要注意的文件,我们在该文件中动态设置不需要被打包的模块并构建出合适的链接。
在webpack项目中，所引入的第三方资源会被统一打包进vender文件中，我们通过webpack的 externals 属性可以设置打包时排除该模块，详情说明见 外部扩展(externals) 。
在前面的步骤中，我们创建的项目包括vue、vue-router，在正式开发在还会有ui库，如element-ui，为了方便演示，我们再安装element-ui和axios两个模块，并实现在构建是把这是个模块以cdn的形式引入。
注意安装时记得-S，它的作用是安装完后在package.json项目文件中插入记录，后续操作需要读取已安装模块
对于cdn，我们可以自己搭建，也可以使用专业的cdn服务商，这里使用免费的cdn bootcdn 。选用免费cdn有很多好处，但毕竟有隐患，那就是服务有可能会奔溃。
依次搜索出前面模块，结果如下
按照规律，得出cdn资源路径规则为
使用cdn其实也就是在webpack热启动和打包项目的时候动态插入script和style链接，为了方便维护，我们通过在build/utils.js文件上添加几个方法，将来在webpack.dev.conf.js和webpack.prod.conf.js上可以使用。
如果没有build/utils.js，可以在其他文件上添加，只要在后续步骤中能操作到就行
1.添加cdn根地址
2.添加cdn模块 按照需要删改
这里特别注意scope，它是webpack配置的external参数下的信息，比如vue的作用域命名是Vue，vue-router的作用域命名是VueRouter，element-ui的作用域命名是ELEMENT，同理，jq的作用域命名是JQuery，具体做法是先引入该资源，然后在控制台依次输入近似的值，一个个匹配(目前没找到更好的做法)。
3.添加获取版本号方法
4.导出不需要被打包的cdn模块配置重点
在webpack热启动本地调试的时候，我们可以使用cdn。
在build/webpack.dev.conf.js中，默认已经引入了utils.js，所以可以直接调用相关方法，如果是自定义的文件，记得引入。
紧接着我们在该文件下找到devWebpackConfig下的plugins下的HtmlWebpackPlugin插件，它的作用是动态构建html页面，原始配置如下：
我们可以往里面添加点自定义属性，方便在index.html中调用。，修改如下：
其中cdnConfig和onlyCss自定义属性，在html上通过htmlWebpackPlugin.options可以读取到。
更多html-webpack-plugin配置情况官网，这里暂时不需要更多。
webpack.prod.conf.js添加cdn配置和忽略模块
在打包的时候，我们使用cdn，配置和前面dev的差不多，只不过需要做多一步。
注意此处的externalModules，后面用到，也就是比dev多的步骤。
externals代表构建时不需要被处理的模块，也就是前面说的scope需要注意的地方。
和dev一样，我们修改webpackConfig下的plugins下的HtmlWebpackPlugin插件配置 (这里的默认配置比dev的多，主要是css压缩和js压缩相关)
加入和dev一样的两个配置，不过需要把onlyCss改为true，因为我们希望打包时不单单使用css。
webpack配置已经完成，在html-webpack-plugin中已经添加了相关参数，我们再在页面上可以直接使用，使用语法是ejs，和asp.net，jsp，php类似。
关于webpack打包php的介绍到此就结束了，不知道本篇文章是否对您有帮助呢？如果你还想了解更多此类信息，记得收藏关注本站，我们会不定期更新哦。
查看更多关于webpack打包php webpack打包的整个过程的详细内容...