首先，回答您的小问题：
- 不，您不应该通过webpack开发服务器运行PHP应用程序。在下面的 实时重新加载 部分中说明。
- 不，您不必重写资产。大概。请参阅下面的 CSS 和 Edge Cases 部分。
免责声明： 我只回答您问题的一小部分。它的范围太宽泛，无法打包成一个StackOverflow答案。
我只会联系
- 为webpack设置开发和生产环境
- 捆绑您的第一个Javascript
这应该为您提供基础。
我还将提到一些您可能需要添加并根据资源进行链接以通读的内容。
所以，走吧。
要求
我假设您在计算机上安装了Node.js和npm，并且大致知道如何使用它们。
我还假设您具有
webpack并
webpack-cli安装为项目的（dev）依赖项（而不仅仅是全局）：
npm install --save-dev webpack webpack-cli
更新： 此答案的早期版本不需要安装
webpack-cli。从版本4（2018年2月）开始，webpack的CLI位于其自己的软件包中，因此需要其他必需的软件包。
设置开发和生产工作流程
您通常希望在开发中做的事与在生产中做事不同（在生产中尽量减少，在开发中实时重新加载，…）
为此，我们需要拆分配置文件。
准备目录结构
让我们同意从您的问题中忽略webpack配置。我们将从头开始，无论如何我们几乎都必须改变。
首先，
build在项目根目录下创建一个文件夹。与构建相关的内容将放在那里，因为我们不想使用配置文件污染您项目的根文件夹。（您可以随意给该文件夹命名，但是在本教程中可以跟踪它。）
在该文件夹中创建一个
config.base.js，一个
config.production.js和一个
config.development.js文件。
太好了，我们现在有两个构建链的配置文件。尽管配置仍然是空的，所以现在让我们用一些基本的逻辑填充它们。
安装 webpack-merge
但是首先，我们需要安装
webpack-merge。
npm install --save-dev webpack-merge
该软件包使我们能够深度合并多个Webpack配置。我们希望根据当前环境使用它来创建Webpack配置。
调整您的配置
现在调整您的
build/config.base.js：
module.exports = { // We'll place webpack configuration for all environments here}该文件现在确实确实只是导出一个空对象，但是在接下来的步骤中我们将需要它。
将此代码放入您的
build/config.production.js：
const merge = require('webpack-merge')module.exports = merge(require('./config.base.js'), { mode: 'production' // We'll place webpack configuration for production environment here})几乎相同的代码输入到您的
build/config.development.js：
const merge = require('webpack-merge')module.exports = merge(require('./config.base.js'), { mode: 'development', watch: true // All webpack configuration for development environment will go here})我猜这是很直观的：
在
config.development.js配置中使用webpack 将获取通用配置并合并其自己的配置声明。
更新：
mode以上配置文件中的选项已添加到webpack
4（2018年2月发布）中。它为开发和生产捆绑软件设置了一堆明智的默认设置。
现在从命令行运行该过程如下：
npx webpack --config build/config.development.js# If the above doesn't work, you probably have an older version of npm (< 5.1) installed# While npx is a really great tool, you can of course still call the path of the webpack executable manually:node_modules/.bin/webpack --config build/config.development.js
…反之亦然
production。
该命令使用起来很笨拙，但是不用担心，我们稍后会解决。
制作一些帮助文件
我们将需要集中一些信息以使其易于交换。文件路径就是这样。因此，让我们提取它们。
paths.js在您的
build文件夹中创建一个，并使其导出一些我们稍后将要使用的路径：
const path = require('path')// I'm really just guessing your project's folder structure from reading your question,// you might want to adjust this whole sectionmodule.exports = { // The base path of your source files, especially of your index.js SRC: path.resolve(__dirname, '..', 'public'), // The path to put the generated bundle(s) DIST: path.resolve(__dirname, '..', 'public', 'dist'), ASSETS: '/dist'}创建别名
如上所述，我们可以在技术上以如下
development方式运行构建链：
npx webpack --config build/config.development.js
不过，这是一个令人不舒服的冗长命令，因此让我们对其进行更改。
通过
npm脚本运行构建过程更方便。
package.json像这样在每个环境中添加一个脚本：
{ "scripts": { "dev": "webpack --config build/config.development.js", "prod": "webpack --config build/config.production.js" }}现在，您可以使用
npm run devresp 运行构建链。
npm run prod–记忆起来更容易，打字也更快。
…当然，有什么要建造的。
捆绑Javascript
好的，这实际上是相当多的工作，但到目前为止还没有取得太大的成就。
因此，让我们从更令人兴奋的事情开始：我们将定义一个Javascript入口点。
定义入口点
将以下代码放入您
build/config.base.js的代码中（完全替换现有代码）：
const path = require('path')const { SRC, DIST, ASSETS } = require('./paths')module.exports = { entry: { scripts: path.resolve(SRC, 'js', 'index.js') }, output: { // Put all the bundled stuff in your dist folder path: DIST, // Our single entry point from above will be named "scripts.js" filename: '[name].js', // The output path as seen from the domain we're visiting in the browser publicPath: ASSETS }}创建Javascript文件
上面的配置要求
index.js将驻留在您的
SRC/js文件夹中（如中所定义
build/paths.js）。
让我们创建具有以下内容的文件：
import './jquery.min.js'import './jquery.migrate.js'import './jquery.bxslider.min.js'import './jquery.appear.js'import './jquery.countTo.js'import './bootstrap.js'
如您所见，
index.jsjust会导入您要使用的所有文件。
如果现在运行
npm run prod
从您的终端，
scripts.js将在您的
DIST文件夹中创建一个文件。您可以使用简单的ol’
<script>标签将其包含在标记中。
恭喜，您的webpack设置可以正常使用！
深潜
这个迷你教程确实只是简单介绍了webpack的功能。它为您的配置奠定了坚实的基础，现在您可以满足需要。这实际上是很多东西。
我将列出一些您可能需要增强的功能，并提供一些通读链接。
webpack概念
如果您想使用webpack，如果您不了解其基本概念，可能会很难做到。JuhoVepsäläinen创建了一个很好的Webpack入门指南，对我有很大帮助。他还是webpack的核心贡献者，因此您可以确定他知道他在说什么。
特别是 装载机 是您真正 需要 了解的概念。
该列表上的许多提示也在此处进行了说明。
阅读更多：SurviveJS – Webpack教程
代码分割
它的名字就是这样：您可能不想将所有Javascript打包到一个庞大的输出文件中。
webpack为您完成了一项工作，即拆分捆绑包中仅在应用程序的某些页面上所需的部分。
另外，根据您使用项目Javascript的频率，从缓存中分离第三方代码以进行缓存可能是个好主意。
阅读更多：webpack文档–代码拆分
快取
您可能想通过将哈希添加到绑定文件名（取决于其内容）来增强站点的缓存行为。例如，这将创建
script.31aa1d3cad014475a618.js而不是
scripts.js。
然后可以无限期地缓存该文件，因为一旦其内容更改，文件名也会随之更改。
然后，您的PHP代码可能会使用
webpack-manifest-plugin来访问生成的文件名。
阅读更多：
- 关于如何永久缓存捆绑包的不可变缓存
- webpack文档–
chunkhash
关于如何使用散列来丰富捆绑文件名 webpack-manifest-plugin
关于如何生成一个manifest.json
包含当前捆绑包文件名的文件
转堆
如果您想在网站的Javascript中使用现代ES2015代码（并且针对非常绿浏览器），则需要将其转换为常规ES5。（如果“
ES2015”一词对您没有意义，则很可能您没有使用它，可以忽略此段。）
阅读更多：
babel-loader–在您的脚本上运行Babel的加载程序
的CSS
有用于CSS的webpack加载程序。和萨斯。和PostCSS。无论你需要什么。
并且由于您可能不打算通过
<script>标签包含CSS ，因此请了解 Extract Text Plugin 来生成实际
.css文件。
更新： 在 提取文本插件
是非常确定。但是，这实际上是一种破解：.css即使webpack仅将Javascript作为其目标语言，它也会生成文件。但是，从webpack 4开始，情况不再如此。现在有一个系统可以定义任意模块类型，包括CSS。
长话短说：希望不久后Webpack中的本机CSS支持能够替换 Extract Text
Plugin 。
提示：路径
我会提到这一点，因为这对我来说是一个真正的痛点，直到我意识到webpack如何在这里工作：
请注意，webpack会识别您的
url(...)语句，并尝试 相对于源文件 解决它们。
这意味着您的源文件
public/css/main.css：
body { background: url('../img/bg.jpg');}如果您的输出路径是
public/dist/css/bundle.css，则将转换为：
body { background: url('../../img/bg.jpg');}阅读更多：
- style-loader和css-loader –您会放心地使用那些。
extract-text-webpack-plugin
缩小
更新： 自webpack
4在2018年2月发布以来，本节已经过时了。将新mode选项设置为"production"现在会自动应用Javascript缩小。
有一个用于Webpack 的Terser插件，可减少您的Javascript。最小化CSS是上述
css-loader插件已内置的功能。
阅读更多：Terser webpack插件
图像优化
webpack是捆绑程序，而不是任务运行程序。因此，图像优化不是真正的Webpack任务。使用实际的任务运行程序或
npm为此定义一些脚本可能会更好。
这并不意味着webpack无法执行此操作。有几乎所有内容的插件。
阅读更多：
- imagemin可以很好地缩小图像。
- imagemin-webpack-plugin会将该过程集成到您的webpack构建链中。
实时重装
实时重新加载的问题很简单：webpack开发服务器只是一个仅提供静态文件的简单Node.js服务器。
对于您来说，
webpack-dev-server可能根本就是错误的工具。请尝试使用
webpack-livereload-plugin可以通过
<script>标签添加的实时重新加载器。
阅读更多：
webpack-livereload-plugin
源地图
更新： 从webpack 4（2018年2月发布）开始，将新
mode选项设置为时将自动生成源地图"development"。
一定要使用源地图。它们使您使用捆绑包的工作变得如此轻松，以至于您想哭。
了解更多：webpack文档–源地图
边缘案例
通常，您将使用webpack处理的所有现有脚本都应该运行良好。
我现在想到的唯一例外是关于全球实体。
看下面的代码：
function myFunc () { console.log('I exist!')}普通Javascript文件中的此代码将
myFunc在您的JS代码中随处可见。但是由于webpack捆绑代码被包装在回调函数中（从而离开了全局范围），所以不再有对该函数的访问。
第三方库在那里应该不是问题，它们通常将全局变量
window直接分配给该对象，但是如果您已经在项目中编写了JS代码，则应该意识到这一点。
自动化！
您将需要尽可能多的自动化工作流程。
考虑
npm run prod在推/拉之前通过git钩运行。
希望这可以帮助。
