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

Question

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

我正在尝试使用webpack模块捆绑器来为我的项目资源创建单个入口点,使用node js package manager管理js依赖项,以minify js css运行任务,image re-size等等.并改善加载单个页面所需的浏览器加载时间.

我遇到了webpack教程并安装了它并安装了它的开发服务器,但问题是我无法理解如何在项目中转换所有当前的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 dev服务器运行你的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在项目根目录中创建一个文件夹.与构建相关的东西会去那里,因为我们不想用配置文件污染项目的根文件夹.(你可以自由地命名这个文件夹,但在本教程中要记录它.)

在该文件夹中创建a config.base.js,a config.production.js和a 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
})

我想这是非常直观的:

将webpack与config.development.js配置一起使用将获取通用配置并合并其自己的配置声明.

更新: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.js只需导入您要使用的所有文件.

如果你现在跑

npm run prod

从您的终端,scripts.js将在您的DIST文件夹中创建一个文件.您可以使用普通的ol'标记将其包含在<script>标记中.

恭喜,你有一个有效的webpack设置!

深入潜水

这个迷你教程真的只是简单地说明了你可以用webpack做什么.它为您的配置提供了坚实的基础,您现在可以根据需要填写.这实际上将是很多东西.

我将列出一些您可能想要增强的内容,以及一些可供阅读的链接.

webpack概念

如果您想使用webpack,如果您不了解其基本概念,则可能很难这样做.JuhoVepsäläinen创建了一个关于webpack入门的精彩指南,这对我帮助很大.他也是webpack的核心贡献者,所以你可以确定他知道他在说什么.

特别是装载机是一个你真正需要知道的概念.

此列表中的许多提示也在那里解释.

阅读更多:SurviveJS - webpack教程

代码拆分

它的名字就是这样说的:你可能不希望将所有的JavaScript打包成一个庞大的输出文件.

这是webpack的一项工作,它可以拆分您在应用程序的某些页面上只需要的部分.

此外,根据您处理项目JavaScript的频率,最好从捆绑中拆分第三方代码以进行缓存.

阅读更多:webpack文档 - 代码拆分

高速缓存

您可能希望通过向捆绑文件名添加哈希来增强站点的缓存行为,这取决于其内容.这将创建(例如)a script.31aa1d3cad014475a618.js而不是a scripts.js.

然后可以无限期地缓存该文件,因为只要其内容发生更改,文件名也将更改.

然后,您的PHP代码可能会使用它webpack-manifest-plugin来获取对生成的文件名的访问权限.

阅读更多:

• 关于如何永久缓存捆绑包的不可变缓存
• webpack文档 -chunkhash关于如何使用哈希丰富包文件名
• webpack-manifest-plugin关于如何生成manifest.json包含当前包的文件名的方法

Transpiling

如果您想在网站的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');
}

阅读更多:

• 样式加载器和css-loader - 你需要那些需要它们.
• extract-text-webpack-plugin

涅槃

更新:自从webpack 4于2018年2月发布以来,该部分已经过时了.将新mode选项设置为"production"现在会自动应用JavaScript缩小.

有一个用于webpack的UglifyJS插件可以缩小你的JavaScript.缩小CSS是已经内置于上述css-loader插件的功能.

在缩小第三方代码时要小心.它通常很好,但特别是处理已经缩小的代码会使UglifyJS不时窒息.

阅读更多:UglifyJS webpack插件

图像优化

webpack是一个捆绑器,而不是任务运行器.因此,图像优化不是真正的webpack任务.您可能最好使用实际的任务运行器或仅为此定义一些npm脚本.

这并不意味着webpack无法做到这一点.几乎所有东西都有插件.

阅读更多:

• imagemin可以很好地自己缩小图像.
• imagemin-webpack-plugin会将该流程集成到您的webpack构建链中.

实时重新加载

你的实时重新加载问题有一个非常简单的原因:webpack dev服务器只是一个简单的Node.js服务器,只提供静态文件.

对于你的情况,webpack-dev-server可能是一个错误的工具.请尝试使用webpack-livereload-plugin直接重新加载器,只需包含via <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钩子运行.

希望这可以帮助.