Question

我目前有一个在localhost：8080上运行的节点/快速应用程序，我有一个webpack版本，可以编译内容到我的公共＆＃39;该项目中的目录正确。

我想使用webpack-dev-server为我自动观察和编译文件，而不是使用＆＃39; watch＆＃39; webpack的财产。

当我启动dev服务器时，启动时间为：

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'

它应该是只是一个文件名而不是任何相对/绝对路径。需要修复它以获得正确的配置，观察任何变化和自动重新加载浏览器。

以下链接供您参考：https://stackoverflow.com/a/47658586/1681972

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

1 个答案: