主页 / 问题 / 937518
Accepted
Aleksandr Krais
Asked:2020-01-28 12:09:41 +0000 UTC2020-01-28 12:09:41 +0000 UTC

如何配置 webpack 开发服务器来更新 php 文件？

  • 772

大家好，我最近开始使用 webpack。我为工作设置了它，一切似乎都很好，但是现在我需要将 index.html 的扩展名更改为 .php ，仅此而已，我现在只能在构建整个项目后才能看到更改。

我查看了带有设置的 browser-sync-webpack-plugin：

new BrowserSyncPlugin(
    {
      host: 'localhost',
      port: 3000,
      proxy: 'http://project',
      files: [
        {
          match: ['./dist'],
          fn(event, file) {
            if (event === 'change') {
              const bs = require('browser-sync').get('bs-webpack-plugin');
              bs.reload();
            }
          },
        },
      ],
    },
    {
      reload: false,
    }
)

但是我的 webpack 给了我一个错误：

找不到模块“浏览器同步”

如何设置我的 webpack 配置以同时使用 html 和 php 文件？

javascript

1 个回答

  1. Best Answer

    也许它会在某个时候对某人有用。问题通过 laravel.mix 解决 一切都编译好了，一切都重新加载了，你可以通过 browsersync 和本地服务器观看。我的 packege.json：

    {
"private": true,
"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"browserslist": [
    "> 1%",
    "last 3 version"
],
"devDependencies": {
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "^2.2.2",
    "cross-env": "^5.2.0",
    "css-mqpacker": "^7.0.0",
    "cssnano": "^4.1.8",
    "laravel-mix": "^4.0.14",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.16.1",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.5.22"
},
"dependencies": {
    "bootstrap": "^4.2.1",
    "inputmask": "^4.0.6",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.6",
    "swiper": "^4.4.6",
    "wowjs": "^1.1.3"
}

    }

    我的 webpack.mix.js：

    let mix = require('laravel-mix');

mix.autoload({
  jquery: ['$', 'window.jQuery']
});
mix.setPublicPath('./')
    .sass('src/scss/main.scss', 'dist/css')
    .options({
      processCssUrls: false
    })
    .sourceMaps()
    .js('src/js/main.js', 'dist/js')
    .extract(['bootstrap', 'popper.js', 'jquery' ]);

mix.browserSync({
  proxy: '*your.project.name*'
});

if (mix.inProduction()) {
  mix.version();
}
    • 1

相关问题