Question

我正试图围绕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一起放入包中
图片要么以原始名称（适用于大图片）复制/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: "bundle.js"
    },
    plugins: [
        new webpack.ProvidePlugin({
            $ : "jquery",
            jQuery : "jquery",
            "window.jQuery" : "jquery",
            "root.jQuery" : "jquery"
        })
    ],
    module: {
        loaders: [
            {
                test: /\.less$/,
                loader: "style!raw!less"
            }
        ]
    }
};

有没有办法只使用webpack解决这个问题？

Answer 1

我想问题是你的output.path /dist/js与--content-base /dist [webpack-dev-server的根目录]不匹配。

您可以尝试将output.path更改为/dist，然后在html中链接捆绑的输出js或将内容库更改为/dist/js

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

重新加载webpack中的HTML更改

我正在尝试做什么：

我尝试了什么

1 个答案: