在现有PHP和JS项目中使用webpack

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

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

我遇到了webpack教程，并安装了它和它的开发服务器，但问题是我无法理解如何将项目中所有当前的js脚本和css链接（我有很多jquery和css库用于在项目中提供多种功能）转换为使用webpack

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

此外，我无法在webpack dev服务器上运行我当前的php应用程序，它首先要在那里运行吗？同时，它只列出了项目的目录。

我创建了一个test

index.js

文件，并使用了以下网页配置：

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 dev服务器上运行：

<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>

---

请帮助我理解这里的概念，以及如何成功地进行迁移？首先，回答您的小问题：

• 不，您不应该通过Web包开发服务器运行PHP应用程序。在下面的“实时重新加载”部分中解释
• 不，你不必重写你的资产。可能请参见下面的CSS和边缘案例部分

---

免责声明：我只回答你问题的一小部分。它的范围太广了，不可能只包含在一个答案中

我只会和你联系

• 为webpack设置开发和生产环境
• 捆绑您的第一个JavaScript

<>这将为你建立一个基础。

我还将提到一些您可能需要添加的内容，并根据所阅读的资源链接这些内容

那么，我们走吧

要求 我假设您的机器上安装了Node.js和npm，并且大致知道如何使用它们

我还假设您已将

webpack

和

webpack cli

安装为项目的（开发）依赖项（不仅仅是全局）：

更新：此答案的早期版本不需要安装

webpack cli

。从版本4（2018年2月）起，webpack的CLI驻留在其自己的包中，因此需要额外的包

建立开发和生产工作流程 您通常希望在开发中做与在生产中不同的事情（在生产中缩小，在开发中重新加载等）

为了实现这一点，我们需要拆分配置文件

准备目录结构 让我们同意忽略您问题中的网页配置。我们要从头开始，无论如何，我们几乎要改变一切

首先，在项目根目录中创建一个

build

文件夹。构建相关的东西将放在那里，因为我们不想用配置文件污染项目的根文件夹。（您可以随意以不同的方式命名此文件夹，但请在本教程中对此进行跟踪。）

在该文件夹中创建一个

config.base.js

、一个

config.production.js

和一个

config.development.js

文件

很好，我们现在有两个构建链的配置文件。配置仍然是空的，所以现在让我们用一些基本逻辑来填充它们

安装

webpack合并

但首先，我们需要安装

webpack merge

npm install --save-dev webpack-merge

此软件包允许我们深入合并多个网页包配置。我们希望使用它根据当前环境创建网页包配置

npm install -g vue-cli
vue init delcon/webpack-simple my-project
cd my-project
npm install

调整您的配置 现在调整您的

构建/config.base.js

：

module.exports = {
  // We'll place webpack configuration for all environments here
}

const merge = require('webpack-merge')

module.exports = merge(require('./config.base.js'), {
  mode: 'production'

  // We'll place webpack configuration for production environment here
})

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
})

显然，该文件现在只导出了一个空对象，但我们需要它来执行以下步骤

将此代码放入您的

build/config.production.js

：

module.exports = {
  // We'll place webpack configuration for all environments here
}

const merge = require('webpack-merge')

module.exports = merge(require('./config.base.js'), {
  mode: 'production'

  // We'll place webpack configuration for production environment here
})

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
})

在

build/config.development.js

中使用的代码几乎相同：

module.exports = {
  // We'll place webpack configuration for all environments here
}

const merge = require('webpack-merge')

module.exports = merge(require('./config.base.js'), {
  mode: 'production'

  // We'll place webpack configuration for production environment here
})

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

configuration的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

创建别名 如上所述，我们可以在

开发

模式下运行构建链，如下所示：

npx webpack --config build/config.development.js

{
  "scripts": {
    "dev": "webpack --config build/config.development.js",
    "prod": "webpack --config build/config.production.js"
  }
}

这是一个令人不安的冗长命令，所以让我们改变它

通过

npm

脚本运行构建过程更加方便。将每个环境的一个脚本添加到您的

包.json

中，如下所示：

npx webpack --config build/config.development.js

{
  "scripts": {
    "dev": "webpack --config build/config.development.js",
    "prod": "webpack --config build/config.production.js"
  }
}

现在，您可以使用

npm run dev

resp运行构建链<代码>npm运行prod–它更容易记忆，打字更快

…当然，只要有什么需要建造的

捆绑JavaScript 好的，到目前为止，这实际上是相当多的工作，没有取得太多的成果

因此，让我们从更激动人心的事情开始：我们将定义一个JavaScript入口点

定义入口点 将以下代码放入

构建/config.base.js

（完全替换现有代码）：

创建JavaScript文件 上述配置要求

index.js

存在于

SRC/js

文件夹中（如

build/path中定义的）
npm run devwatch

npm run dev

npm run build