Webpack/node.js 构建，webpack-dev-server 是否可以将文件提供给我的公共目录？

Question

我目前有一个在 localhost:8080 运行的 node/express 应用程序，我有一个 webpack 构建，可以将内容正确编译到该项目中的“公共”目录。

我想使用 webpack-dev-server 自动为我实时监视和编译文件，而不是使用 webpack 的 'watch' 属性。

当我启动开发服务器时，开始于：

localhost:8081

我的节点应用程序位于：

localhost:8080

我的节点应用资产来自：

localhost:8080/public/css/main.css
localhost:8080/public/js/main.build.js

我想知道 webpack-dev-server 是否有可能从这里代替服务器文件？目前我可以到达：

localhost:8081/public/js/main.css

但这不是我的快速服务器从...读取资产的地方...帮助，非常感谢。

编辑：下面是 webpack.config.js，希望这里没什么特别的

const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
    filename: "./../sql-app/public/css/main.css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
    entry: ['./src/js/app.js','./src/scss/main.scss'],
    output: {
        filename: './../sql-app/public/js/build.min.js',
        sourceMapFilename: '[file].map'
    },
    devtool: 'source-map',
    watch: (process.env.NODE_ENV !== 'staging' && process.env.NODE_ENV !== 'production') ? true : false,
    module: {
        loaders: [{
            test: /\.js[x]?$/,
            loaders: ['babel-loader?presets[]=es2015'],
            exclude: /(node_modules|bower_components)/
        }, {
            test: /\.woff$/,
            loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]"
        }, {
            test: /\.woff2$/,
            loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]"
        }, {
            test: /\.(eot|ttf|svg|gif|png)$/,
            loader: "file-loader"
        }],
        rules: [{
            test: /\.scss$/,
            use: extractSass.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
        }]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery',
            'global.jQuery': 'jquery'
        }),
        extractSass
    ],
    resolve: {
        alias: {
            'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
        }
    }
};

Answer 1

您可以在 webpack.config.js 中添加以下类似代码

entry: './src/entry.js',
output: {
    path: path.join(__dirname, 'src/dist'),
    filename: 'bundle.js',
    publicPath: '/'
},
devServer: {
    contentBase: path.join(__dirname, 'src/dist'),
} 

我可以在您的代码中看到一个问题 [它会起作用，但不是正确的方法]

文件名：'./../sql-app/public/js/build.min.js'

它应该是只是一个文件名，而不是任何相对/绝对路径。 需要对其进行修复以获得正确的配置，该配置会监视任何更改并自动重新加载浏览器。

这是供您参考的链接：https://stackoverflow.com/a/47658586/1681972