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": {}
}

webpack webpack-dev-server
person Bernd Plegt    schedule 22.02.2018    source источник
comment
webpack-dev-server не записывает файлы на диск. маршрут / webpack-dev-server покажет, где обслуживаются файлы. с webpack.js.org/configuration/dev-server   -  person olore    schedule 23.02.2018

Ответы (4)


arrow_upward
9
arrow_downward

webpack-dev-server служит по памяти. Если вы хотите видеть файлы на диске во время разработки с webpack-dev-server, вам нужно одновременно запустить стандартную webpack сборку. Дополнительные сведения см. В этом ответе.

person Pezzer    schedule 23.02.2018

arrow_upward
11
arrow_downward

Вы можете просмотреть сгенерированные URL-адреса с помощью webpack-dev-server в этом URL-адресе.

http://localhost:8080/webpack-dev-server (при необходимости измените хост и порт)

webpack-dev-server не будет записывать файлы на диск, но вы можете увидеть их там.

person jordiburgos    schedule 23.02.2018

arrow_upward
7
arrow_downward

dev-сервер имеет параметр writeToDisk

module.exports = {// ... devServer: {writeToDisk: true}};

проверьте это: https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-

person Ivan Vilches Basaul    schedule 04.12.2019

arrow_upward
2
arrow_downward

Вы заметили, что dist / scripts не обновляется.
Как уже говорили другие, 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 обслуживает output.filename на localhost:8080/ (например, 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 будет ненужным.

person Lindsay-Needs-Sleep    schedule 08.10.2020