Webpack / node.js構建，webpack-dev-server是否可以將文件提供到我的公共目錄？

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'),
} 

如我所見，您的代碼中有一個問題[它會起作用，但方法不正確]

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

它應該只是一個文件名，而不是任何相對/絕對路徑。 需要對其進行修復以獲取正確的配置，該配置可以監視任何更改並自動重新加載瀏覽器。

這是供您參考的鏈接： https : //stackoverflow.com/a/47658586/1681972