相关疑难解决方法(0)

我是JS开发的新手,尝试使用webpack-dev-server热插拔更改我保持异常.确切的堆栈是:

Error: `output.path` needs to be an absolute path or `/`.
at Object.Shared.share.setFs (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-middleware/lib/Shared.js:88:11)
at Shared (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-middleware/lib/Shared.js:214:8)
at module.exports (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-middleware/middleware.js:22:15)
at new Server (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-server/lib/Server.js:56:20)

at startDevServer (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-server/bin/webpack-dev-server.js:379:12)
at processOptions (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-server/bin/webpack-dev-server.js:317:3)
at Object.<anonymous> (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-server/bin/webpack-dev-server.js:441:1)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)

这是我已经尝试过的webpack配置文件:

module.exports = {
    entry: "./client/app.jsx",
    output: {
        path: "dist/js",
        filename: "bundle.js",
        publicPath: "http://127.0.0.1:2992/js"
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: "babel-loader",
                include: /client/
            }
        ]
    }
};

和:

module.exports = {
    entry: "./client/app.jsx",
    output: { …

我正试图围绕webpack以及它如何处理资源.

这是我的项目结构:

/dist
  (files that can be pushed to server)
/src
  /styles
    s.less
  /js
    main.js
    a.js
  /img
    splash.png
  profile.html
entry.js (webpack entry file)

我正在做的事情:

• LESS文件被编译为CSS并与JS一起放入bundle
• 图像要么/src/img -> /dist/img以其原始名称复制(适用于大图像),要么复制为base64'd(适用于图标)
• htmls /src/ -> /dist/以其原始名称复制
• 每次我更改样式或js中的html或任何内容时,它都会执行上述步骤并在浏览器中重新加载页面

基本上我需要能够在不触及浏览器窗口的情况下查看当前的应用程序状态

我试过的

我跑了

• webpack-dev-server --content-base /dist --hot-loading(有和没有--hot-loading),但这不会重新加载CSS/LESS更改

• 以上webpack --watch,这解决了CSS重新加载,但我仍然需要手动将html和图像复制到/ dist

• 以上两个以及监视html和图像并将它们复制到dist的gulp任务.这解决了复制问题,但它没有通知webpack-dev-server更改,因此每次更改HTML时我都需要F5; 它击败了热重装的全部目的.

• 我尝试添加,file-loader但这不适用于HTML,因为它生成需要html文件的JS脚本

这是我的entry.js

require("./src/js/main");
require("./src/css/s.less");

和webpack.config.js:

var path = require('path');
var webpack = require("webpack");
module.exports = {
    entry: "./entry.js",
    output: {
        path: path.join(__dirname,'/dist/js'),
        filename: …