Perl - Mojolicious Webpack无法从文件加载应用程序[关闭]

Question

mojo webpack script\one_commex

可在http://127.0.0.1:3000 获得网络应用程序 无法执行“C:\Users....\Box Sync\projects\perl_projects\mojo_projects\one_commex\node_modules.bin\webpack”：C:/Strawberry/perl/site/lib/Mojolicious 没有这样的文件或目录/Plugin/Webpack/Builder.pm 第 214 行。 无法从文件“C:\Users....\Box Sync\projects\perl_projects\mojo_projects\one_commex\script\one_commex”加载应用程序：[Webpack] exec C:\Users...\Box Sync\projects\ perl_projects\mojo_projects\one_commex\node_modules.bin\webpack --config C:\Users...\Box Sync\projects\perl_projects\mojo_projects\one_commex\webpack.config.js --watch: 在 C: 没有这样的文件或目录： /Strawberry/perl/site/lib/Mojolicious/Plugin/Webpack/Builder.pm 第 215 行。 在 (eval 107) 第 1 行的 require 编译失败。 [Webpack] 找不到 C:\Users...\Box Sync\projects\perl_projects\mojo_projects\one_commex\public\asset\webpack.development.html。确定 webpack 已经运行了吗？在 C:/Strawberry/perl/site/lib/Mojolicious/Plugin/Webpack.pm 第 87 行。

它可以在 Ubuntu 机器上正常工作。 在 Windows 中，webpack 安装包，创建资产目录 webpack.custom.js，创建一个公共目录作为“资产”。但是，它会引发错误。

Answer 1

我已经能够根据我从为我的 django 项目完成的设置中学到的技巧找到解决方案。

手动创建 webpack.config.js 用于通用（开发）设置和 webpack.prod.config.js 用于生产以及 mojolicious 项目根目录中的 package.json

我的 webpack.config.js 如下所示：

var path = require("path");
var webpack = require("webpack");
var BundleTracker = require("webpack-bundle-tracker");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var { CleanWebpackPlugin } = require("clean-webpack-plugin");


module.exports = {
    context: __dirname,
    entry: './public/javascripts/index',
    output: {
        path: path.resolve('./public/bundles/'),
        filename: "[name].js"
    },
        resolve: {
            alias: {
                'jquery': path.join(__dirname, 'node_modules/jquery/src/jquery')
            }
        },
    plugins: [
        new BundleTracker({
            filename: './webpack-stats.json'
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            jquery: "jquery",
            "window.jQuery": "jquery",
            Highcharts: 'highcharts',
        }),
        new MiniCssExtractPlugin({
            filename: `[name].css`
        }),
        new CleanWebpackPlugin()
    ],
    module: {
        rules: [
            { 
                test: /\.js$/, 
                exclude: /(node_modules|bower_components)/,
                use: {
                        loader: 'babel-loader',
                        options: {
                                presets: ['@babel/preset-env']
                        }
                }
            },
            {
                test: /\.(woff(2)?|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
                use: [
                        {
                                loader: 'url-loader',
                        }
                ],
            },
            { 
                test: /\.(sass|scss|css)?$/, 
                use: [
                        { 
                                loader: MiniCssExtractPlugin.loader,
                                options: {
                                        publicPath: './bundles',
                                }
                        },
                        { loader: 'css-loader' },
                        {
                                loader: 'postcss-loader',
                                options: {
                                plugins: function () { // post css plugins, can be exported to postcss.config.js
                                return [
                                    require('precss'),
                                    require('autoprefixer')
                                ];
                                }
                                }
                        },
                        { loader: 'resolve-url-loader' },
                        { loader: 'sass-loader' }
                ]

            }, 
            { 
                test: /\.(jpe?g|png|gif)$/i, 
                use: ['file-loader']
            },
        ],
    },
}

我的布局模板 default.html.ep 看起来像这样

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    %= include 'layouts/_mojo_default'
    <link type="text/css" rel="stylesheet" href="/bundles/main.css">
  </head>
  <body>
    <%= content %>
    <h1 class="text-primary">All OK!<h1>
    <script type="text/javascript" src="/bundles/main.js"></script>
  </body>
</html>

然后，在我的 package.json 中添加以下脚本

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js --mode development",
    "build-watch": "webpack --config webpack.config.js --mode development --watch",
    "build-production": "webpack --config webpack.prod.config.js --mode production"
  },

所以，现在我可以打开一个控制台来运行以下命令，它负责在前端代码更改时构建包

> npm run build-watch

在其他控制台中，我运行以下命令：

> morbo script\<app>

在部署之前，我将运行以下命令：

> npm run build-production

并更改我的 default.html.ep （虽然可以借助服务器端操作来完成动态方式）

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    %= include 'layouts/_mojo_default'
    <link type="text/css" rel="stylesheet" href="/dist/main.css">
  </head>
  <body>
    <%= content %>
    <h1 class="text-primary">All OK!<h1>
    <script type="text/javascript" src="/dist/main.js"></script>
  </body>
</html>

就是这样！