将webpack与现有的PHP和JS项目一起使用
我有一个现有的PHP项目与jQuery和引导，不使用任何前端框架。
我正在尝试使用webpack模块打包器来为我的项目资源创build一个入口点，使用节点js包pipe理器来pipe理js依赖关系，运行任务以缩小js css，图像重新大小等等。 并提高加载单个页面所需的浏览器加载时间。
我遇到了webpack的教程，并得到安装它，并安装其开发服务器，但问题是，我不能够了解如何将我所有的当前js脚本和CSS链接在项目中（我有很多用于在项目中提供多个function的jquery和CSS库）使用webpack。
我是否必须以适合webpack的方式来重写所有的JS和CSS文件？ 我如何成功迁移？
另外，我无法在webpack dev-server上运行我的当前php应用程序，它是否意味着首先在那里运行？ 同时只列出项目的目录。
我创build了一个testingindex.js文件，并使用下面的webpackconfiguration：
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到我的脚本加载只是为了testing，如下所示，希望应用程序将在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>
请帮我理解这里的概念，以及如何成功完成此迁移？
首先，回答你的小问题：
- 不，您不应该通过webpack dev服务器运行您的PHP应用程序。 在下面的Live Reloading部分解释。
- 不，你不需要重写你的资产。 大概。 请参阅下面的CSS和边缘案例部分。
免责声明：我只会谈谈你的问题的一小部分。 它的范围太广泛，不能被包装成一个StackOverflow的答案。
我只会联系
- 为webpackbuild立一个开发和生产环境
- 捆绑您的第一个JavaScript
这应该为你打下基础。
我还会提到一些您可能想要添加的内容，并根据资源链接进行阅读。
那么，我们走吧。
要求
我假设你的机器上安装了Node.js和npm，大致知道如何使用它们。
我还假设你已经安装了webpack作为你的项目的（dev）依赖项，而不是（仅）全局的。
build立开发和生产工作stream程
你通常想要在开发中比在生产中做不同的东西（在产品中缩小，在开发中重新加载，…）
为了达到这个目的，我们要分割我们的configuration文件。
准备目录结构
让我们忽略你的问题的webpackconfiguration。 我们将从头开始，无论如何我们将不得不改变几乎所有的东西。
首先，在您的项目根目录下创build一个生成文件夹。 与构build相关的东西将去那里，因为我们不想污染你的根文件夹与configuration文件。 （你可以自由地命名这个文件夹，但在本教程中保持跟踪。）
在该文件夹内创build一个config.base.js ，一个config.prod.js和一个config.dev.js文件。
太好了，我们现在有两个构build链的configuration文件。 虽然configuration仍然是空的，现在让我们来填充一些基本的逻辑。
安装webpack-merge
但首先，我们需要安装webpack-merge 。
npm install --save-dev webpack-merge
这个包允许我们深度合并多个webpackconfiguration。 我们希望根据当前的环境使用它来创buildwebpackconfiguration。
调整你的configuration
现在调整你的build/base.config.js ：
module.exports = { // We'll place webpack configuration for all environments here }
该文件显然只是出口一个空的对象，但我们将需要为以下步骤。
把这段代码放在build/prod.config.js ：
const merge = require('webpack-merge') module.exports = merge(require('./config.base.js'), { // We'll place webpack configuration for prod environment here })
和几乎相同的代码进入你的build/dev.config.js ：
const merge = require('webpack-merge') module.exports = merge(require('./config.base.js'), { watch: true // All webpack configuration for dev environment will go here })
我猜这是非常直观的：
使用webpack与dev.config.jsconfiguration将获取通用configuration并合并自己的configuration声明。
从命令行运行该过程将如下所示：
./node_modules/.bin/webpack --config build/config.dev.js
… prod环境相反。 （现在configuration的唯一区别是dev模式会运行一个观察器， prod模式不会，现在没问题。）
这个命令真的很笨，但是不用担心，我们稍后会解决。
制作一些帮手文件
有些信息我们希望集中起来，使它们易于交换。 文件path是这样的事情。 所以让我们提取它们。
在你的build文件夹中创build一个paths.js文件，然后导出一些我们稍后需要使用的path：
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' }
创build别名
如上所述，我们可以在技术上以dev模式运行我们的构build链，如下所示：
./node_modules/.bin/webpack --config build/config.dev.js
虽然这是一个奇怪的详细命令，所以让我们改变这一点。
通过npm脚本运行你的构build过程更方便。 每个环境添加一个脚本到你的package.json是这样的：
{ "scripts": { "dev": "webpack --config build/config.dev.js", "prod": "webpack --config build/config.prod.js" } }
现在你可以用npm run dev resp来运行你的构build链。 npm run prod 。
当然，一旦有任何东西要build立。
捆绑JavaScript
好的，那实际上是相当数量的工作，而没有实现太多的目标。
所以让我们从更激动人心的事情开始：我们将定义一个JavaScript入口点。
定义一个入口点
将下面的代码放到你的build/config.base.js （完全replace现有的代码）：
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 } }
创buildJavaScript文件
上面的configuration需要一个index.js位于你的SRC/js文件夹中（如build/paths.js定义的build/paths.js ）。
我们用下面的内容创build该文件：
require('./jquery.min.js') require('./jquery.migrate.js') require('./jquery.bxslider.min.js') require('./jquery.appear.js') require('./jquery.countTo.js') require('./bootstrap.js')
正如你所看到的， index.js只是导入你想要使用的所有文件。
如果你现在运行
npm run prod
从您的terminal，一个scripts.js文件将在您的DIST文件夹中创build。 你可以用普通的ol <script>标签把它join到你的标记中。
恭喜，你已经有了一个可用的webpack安装程序！
潜入更深
这个迷你教程真的只是刮起了你可以用webpack做什么的表面。 它为您的configuration提供了一个非常坚实的基础，您现在可以根据需要填写任何configuration。 这实际上是相当多的东西。
我会列出一些您可能想要增强的内容，并提供一些链接供您阅读。
webpack概念
如果你想使用webpack，如果你不了解它的基本概念，可能很难做到这一点。 JuhoVepsäläinen为webpack入门创build了一个很好的指南，帮助我完成了很多工作。 他也是webpack的核心贡献者，所以你可以肯定他知道他在说什么。
特别是装载机是你真正需要知道的概念。
在这个清单上的许多提示也在那里解释。
阅读更多： SurviveJS – webpack教程
代码拆分
它的名字是这么说的：你可能不想把所有的JavaScript打包成一个庞大的输出文件。
这是一个webpack为你做的工作，可以分离你的应用程序的某些页面上只需要的部分。
而且，根据您项目JavaScript的工作频率，从caching中分离第三方代码可能是一个好主意。
阅读更多： webpack文档 – 代码分割
高速caching
您可能希望通过将散列添加到捆绑的文件名（取决于其内容）来增强站点的caching行为。 这将创build（例如）一个script.31aa1d3cad014475a618.js而不是一个scripts.js 。
该文件可以无限期地被caching，因为只要其内容改变，文件名也会改变。
您的PHP代码可能会使用webpack-manifest-plugin访问生成的文件名。
阅读更多：
- 不变的caching关于如何caching你的包永远
- webpack文档 –
chunkhash关于如何使用散列丰富你的包文件名 -
webpack-manifest-plugin，了解如何生成包含当前包的文件名的manifest.json
Transpiling
如果你想在你的网站的JavaScript中使用现代的ES2015代码（并且针对非常规浏览器），你需要把它们转换成常规的ES5。 （如果术语“ES2015”对您没有任何意义，您很可能不会使用它，可以忽略这一段。）
阅读更多： babel-loader – 在脚本上运行babel的加载器
CSS
有CSS的webpack加载器。 和Sass。 和PostCSS。 无论你需要什么。
由于您可能不打算通过<script>标签包含CSS，所以了解Extract Text Plugin以生成实际的.css文件。
提示：path
我会提到这一点，因为这是一个真正的痛苦，直到我意识到webpack如何在这里工作：
请注意，webpack将识别您的url(...)语句，并尝试解决它们相对于您的源文件 。
这意味着，你的源文件public/css/main.css ：
body { background: url('../img/bg.jpg'); }
如果你的输出path是public/dist/css/bundle.css将会被转换为：
body { background: url('../../img/bg.jpg'); }
阅读更多：
- 样式加载器和CSS加载器 – 您将需要这些。
-
extract-text-webpack-plugin
涅槃
有一个UglifyJS插件的webpack来缩小你的JavaScript。 Minify CSS是一个已经内置到上面提到的css-loader插件的function。
缩小第三方代码时要小心。 这通常很好，但特别是处理已经缩小的代码，使UglifyJS不时呛。
阅读更多： UglifyJS webpack插件
图像优化
webpack是一个捆绑器，而不是一个任务运行者。 因此，图像优化不是一个真正的webpack任务。 你可能会更好使用实际的任务运行或为此定义一些npm脚本。
这并不意味着webpack不能做到这一点。 有几乎所有的插件。
阅读更多：
- imagemin可以很好地缩小图像。
- imagemin-webpack-plugin将把这个过程整合到你的webpack构build链中。
实时重新加载
实时重新加载的问题有一个非常简单的原因：一个webpack dev服务器只是一个简单的Node.js服务器，只提供静态文件。
对于你来说， webpack-dev-server可能根本就是错误的工具。 尝试使用webpack-livereload-plugin代替一个可以通过<script>标签包含的实时重载器。
阅读更多： webpack-livereload-plugin
源地图
通过一切手段，使用源地图。 他们会使你的捆绑工作变得更容易，你会哭泣。
阅读更多： webpack文档 – 源地图
边缘情况
通常，你用webpack处理的所有现有的脚本应该运行得很好。
我现在想到的唯一例外就是全球实体。
看下面的代码：
function myFunc () { console.log('I exist!') }
在一个普通的JavaScript文件中的这个代码会让你的JS代码中的任何地方都可以使用myFunc 。 但是，由于webpack捆绑包代码被封装在callback函数中（因此离开了全局范围），将不再有任何对该函数的访问。
第三方库不应该成为一个问题，他们通常直接将它们的全局variables分配给window对象，但是如果您已经在项目中编写了JS代码，则应该意识到这一点。
自动化！
您需要尽可能多地自动化您的工作stream程。
考虑在推/拉之前通过git钩子运行npm run prod 。
希望这可以帮助。
基于现有的vue-templates和@Loilo的回答，我制作了vue模板，您可以使用vue-cli进行安装。 这个模板可以快速启动vue应用程序，您可以将其扩展或集成到您现有的环境中。
npm install -g vue-cli vue init delcon/webpack-simple my-project cd my-project npm install
devwatch：
此模板有一个额外的运行devwatch选项，用于监视文件更改，而不是使用webpack-dev-server。 这使得它可以用于任何现有的web服务器环境。
npm run devwatch
开发：
使用默认的webpack-dev-server运行它，在index.html中删除<script src="http://localhost:35729/livereload.js"></script>
npm run dev
build立：
build立您的生产项目：
npm run build