Question

我部署我的第一个 webpack应用。我可能有一些误解。
我的（简单）应用程序是 Webpack2 + Bootstrap4 + ReactJS 。我跑了...... npm run prod（优化序列）。
我的“ dist ”文件夹现在包含文件＆amp;我列出的文件夹。
我使用 DigitalOcean ， Nginx ，表达，...来部署我的 Webpack 应用。
我将 Webpack 应用程序上传到我的DigitalOcean 顶部目录中的目录。
在这个名为“ wp2-bs4-rjs ”的目录中，我放置了：
index.html ， app.bundle.js ， app.css ， imgs （文件夹）。
这个“ wp2-bs4-rjs ”目录还包含：
package.json （对于快递）＆amp; node_modules 文件夹（快递，部署）。
我假设我的Webpack应用不使用 node_modules 文件夹，
现在已经优化（？）。
重要：当我在计算机的localhost中使用 webpack-dev-server 时，
Bootstrap ＆amp; jQuery 有效（一切正常）。
但，当我查看我的Webpack应用在线时，我看到文字及其背景图片，
但没有 Bootstrap影响。
因为我看我的背景图片＆amp;我的 css 样式，知道 app.css 文件正确正常工作。
同样，因为我看到文字，我知道我的 app.bundle.js 文件部分工作。
但，某些原因， Bootstrap ＆amp;我的 app.bundle.js 文件中的 jQuery 不正在运行。
我的JavaScript 控制台＆amp;中有没有错误网络标签。
你对错误的内容有任何想法吗？
这是网址：wp2-bs4-rjs
我的 Webpack 应用提供在域的localhost端口3000上，使用反向代理 。
- - - - - - - - - - - - - - - - - -
谢谢你，MLR
============================================== ==========================
更新：我尝试将一些Node软件包安装为依赖项，
看看它是否有所作为。它确实不。
安装在我的 DigitalOcean 服务器＆amp;我的计算机的webpack-dev-server（Webpack项目）：
“babel-cli”：“^ 6.24.1”，“babel-preset-es2015”：“^ 6.24.1”，“babel-preset-react”：“^ 6.24.1”，“bootstrap” ：“^ 4.0.0-alpha.6”，“express”：“^ 4.15.3”，“jquery”：“^ 3.2.1”，“react”：“^ 15.6.1”，“react-dom” ：“^ 15.6.1”，“tether”：“^ 1.4.0”，“webpack”：“^ 3.0.0”
- - - - - - - - - - - - - - - - - - 在我的 DigitalOcean 服务器＆gt; Webpack项目中安装了不，在我的计算机的webpack-dev-server版本中安装了但：
ejs，css-loader，style-loader，sass-loader，node-sass，extract-text-webpack-plugin，webpack-dev-server，babel-loader，babel-core，rimraf，file-loader， image-webpack-loader，libpng，bootstrap-loader，resolve-url-loader，url-loader，imports-loader exports-loader，postcss postcss-loader，purifycss-webpack，purify-css
============================================== ==========================
更新：由于 node_modules 文件夹与 app.bundle.js 位于相同的目录中。 ..
＆安培; 全部其他（非图片）文件，...
在 app.bundle.js 中，我尝试将./node_modules的所有次更改为node_modules。
它确实不工作。虽然我的问题可能是错误的组合。
============================================== ========================== 你好，这是我的Webpack config （如你所知）。

'use strict';
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const glob = require('glob');
const PurifyCSSPlugin = require('purifycss-webpack');

const isProd = process.env.NODE_ENV === 'production';
const cssDev = ['style-loader','css-loader', 'resolve-url-loader', 'sass-loader'];
const cssProd = ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader','sass-loader'],
    publicPath: '/dist'
});
let cssConfig = isProd ? cssProd : cssDev;

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    resolve: { extensions: ['.js','.jsx','.html','.css','.scss'] },
    module: {
        rules: [{
                test: /\.scss$/,
                use: cssConfig// potentially the ExtractTextPlugin.extract(...)
            },{
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },{
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [
                    'file-loader?name=[name].[ext]&outputPath=imgs/&publicPath=./',
                    'image-webpack-loader'
                ]
            },{
                test: /\.(woff2?|svg)$/,
                use: 'url-loader?limit=10000&name=fonts/[name].[ext]'
            },{
                test: /\.(ttf|eot)$/,
                use: 'file-loader&name=fonts/[name].[ext]'
            },{
                test: /bootstrap[\/\\]dist[\/\\]js[\/\\]umd[\/\\]/,
                use: 'imports-loader?jQuery=jquery'
            }
        ],
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        hot: true,
        open: true,
        stats: 'errors-only'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'ReactJS Webpack Bootstrap',
            hash: true,
            template: './index.html',
            minify: {collapseWhitespace: true}
        }),
        new ExtractTextPlugin({
            filename: '[name].css',
            disable: !isProd,
            allChunks: true
        }),
        new PurifyCSSPlugin({
            paths: glob.sync(path.join(__dirname, 'index.html')),
            purifyOptions: { minify: true }
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            Tether: "tether",
            "window.Tether": "tether",
            Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
            Button: "exports-loader?Button!bootstrap/js/dist/button",
            Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
            Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
            Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
            Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
            Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
            Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
            Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
            Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
            Util: "exports-loader?Util!bootstrap/js/dist/util"
        })
    ]
};

部署的Webpack - Bootstrap不工作 - DigitalOcean

0 个答案: