WebPack-Dev-Server不会将捆绑包放在Dist中

我正在尝试为要构建的网站设置WebPack配置。我想将Sass编译到CSS，然后将其放入DIST文件夹中。当我运行npm run build时，它可以正常工作，但是当我运行npm run watch触发WebPack-dev-server时，它不会将index.js编译为bundle.js，并且不会出现在DIST文件夹中。我的webpack.config.js有什么问题？

index.html

<html>
    <head>
        <title>Getting Started</title>
        <link rel="stylesheet" href="dist/css/main.min.css">
    </head>
    <body>
        test
        <script src="dist/scripts/bundle.js"></script>
    </body>
</html>

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
    filename: "../css/main.min.css",
    disable: process.env.NODE_ENV === "development"
});
module.exports = {
  entry: './src/scripts/index.js',
  output: {
    path: path.resolve(__dirname, 'dist/scripts'),
    filename: 'bundle.js',
    publicPath: 'dist/scripts'
  },
  module: {
    rules: [
        {
            test: /.scss$/,
            use: extractSass.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],
                fallback: "style-loader"
            })
        }   
    ]
  },
  plugins: [
    extractSass
  ]
};

package.json

{
  "name": "project1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --optimize-minimize",
    "watch": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.2",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
  },
  "dependencies": {}
}

dev服务器具有选项writetodisk

module.exports = {//... devserver：{writetodisk：true}}};

检查以下内容：https://webpack.js.org/configuration/dev-server/#devserverwriteTodisk-

webpack-dev-server从内存中使用。如果您想在使用webpack-dev-server开发过程中查看磁盘上的文件，则需要同时运行标准的webpack构建。有关详细信息，请参见此答案。

您可以通过webpack-dev-server向此URL查看生成的URL。

http：//localhost：8080/webpack-dev-server(根据需要更改主机和端口(

webpack-dev-server不会将文件写入磁盘，但是您可以在那里看到它们。

您已经注意到dist/脚本未更新。
就像其他人所说的那样，webpack-dev-server只将其保存在内存中。
，但是您可以利用此优势。

将其添加到您的webpack.config.js：

module.exports = {
...
  devServer: {
    open: true,             // Automatically open the browser
    hot: true,              // Automatically refresh the page whenever bundle.js 
    publicPath: '/dist/scripts',
  },
...
};

publicPath：'/dist/scripts'
这是魔术所在的地方。
默认情况下，webpack-dev-server在 localhost:8080/上为配置的 output.fileName 服务(例如 localhost:8080/bundle.js(。
我们更改了它，以便它在localhost:8080/dist/scripts/(例如localhost:8080/dist/scripts/bundle.js(上提供内容。
现在您的index.html将能够成功找到<script src="dist/scripts/bundle.js"></script>。

注意：您必须访问您的index.html通过localhost:8080进行此工作。
例如。从file://...或其他主机/端口访问将无法使用，因为它会在系统上寻找实际文件(当然不会更新(。

另外，如果您有output: { filename: '/dist/scripts/bundles.js } }而不是output: { filename: 'bundles.js } }，则 publicPath 将不必要。

相关内容

最新更新

热门标签：