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

Question

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

我想使用 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'),
}

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

filename: './../sql-app/public/js/build.min.js'

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

这里是 link 供您参考：

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

Webpack/node.js build, is it possible for webpack-dev-server to serve files to my public directory?

node.js

express

webpack

webpack-dev-server