将webpack与现有的PHP和JS项目一起使用

Question

我有一个带有jquery和bootstrap的现有PHP项目，没有使用任何前端框架。

我正在尝试使用webpack模块捆绑器来为我的项目资源创建单个入口点，使用节点js包管理器管理js依赖项，以缩小js
css的方式运行任务，调整图像大小等。并缩短了加载单个页面所需的浏览器加载时间。

我遇到了webpack教程，必须安装并安装它的dev-server，但是问题是我无法理解如何转换项目中所有当前的js脚本和CSS链接（在那里我有很多东西）
jQuery和CSS库（用于在项目中提供多种功能）以使用Webpack。

是否需要以适合webpack的方式重写我的所有JS和CSS文件？ 如何成功迁移？

此外，我无法在webpack开发服务器上运行当前的php应用程序，是不是要首先在其中运行？ 同时，它仅列出项目的目录。

我创建了一个测试index.js文件，并使用了以下webpack配置：

var path = require('path');
var webpack = require('webpack');

module.exports =
{
    entry: [
        './public/js/index.js',
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080'
    ],
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        path: path.join(__dirname, "public/dist/js"),
        publicPath : "http://localhost:8080/my_proj/public/dist/js",
        filename: "bundle.js"
    }

};

我将bundle.js脚本添加到脚本负载中只是为了进行测试，如下所示，希望该应用程序可以在webpack开发服务器上运行：

<script type="text/javascript" src="public/dist/js/bundle.js"></script>
<script type="text/javascript" src="public/js/jquery.min.js"></script>
<script type="text/javascript" src="public/js/jquery.migrate.js"></script>
<script type="text/javascript" src="public/js/jquery.bxslider.min.js"></script>
<script type="text/javascript" src="public/js/jquery.appear.js"></script>
<script type="text/javascript" src="public/js/jquery.countTo.js"></script>
<script type="text/javascript" src="public/js/bootstrap.js"></script>

请帮助我理解这里的概念，以及如何成功进行此迁移？

Answer 1

首先，回答您的小问题：

• 不，您不应该通过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 section
module.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'),

  /*
  This is your public path.
  If you're running your app at http://example.com and I got your DIST folder right,
  it'll simply be "/dist".
  But if you're running it locally at http://localhost/my/app, it will be "/my/app/dist".

  That means you should probably *not* hardcode that path here but write it to a
  machine-related config file. (If you don't already have something like that,
  google for "dotenv" or something similar.)
  */
  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钩运行。

希望这可以帮助。