1

Первый раз самостоятельно настраиваю webpack.

Дев сервер работает вроде бы нормально, обновляет страницу при изменении стилей. Но если в папке компонента появляется файл .hbs или .html (разметка компонента), то файл стилей этого компонента перестает обновляться (а сборщик при этом реагирует на изменения и вроде пересобирает) и нужно перезапускать сервер, чтобы увидеть изменения.

И с js также.

Не могу понять, почему файл разметки все ломает?

package.json:

    {
 "name": "game",
 "version": "1.0.0",
 "description": "",
 "main": "app.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "lint": "eslint --cache --ext .js ./src/",
   "lint:fix": "eslint --fix --cache --ext .js ./src/",
   "build": "webpack -p",
   "start": "webpack-dev-server"
 },
 "repository": {
   "type": "git",
   "url": ""
 },
 "author": "dezIntegrator",
 "license": "ISC",
 "homepage": "",
 "devDependencies": {
   "babel-core": "^6.26.0",
   "babel-loader": "^7.1.2",
   "babel-preset-env": "^1.6.1",
   "css-loader": "^0.28.7",
   "eslint": "^4.9.0",
   "eslint-config-airbnb-base": "^12.1.0",
   "eslint-loader": "^1.9.0",
   "eslint-plugin-import": "^2.8.0",
   "extract-text-webpack-plugin": "^3.0.2",
   "handlebars-webpack-plugin": "^1.3.0",
   "node-sass": "^4.7.2",
   "sass-loader": "^6.0.6",
   "style-loader": "^0.19.0",
   "webpack": "^3.10.0",
   "webpack-dev-server": "^2.9.7"
 },
 "dependencies": {
   "normalize.css": "^7.0.0"
 }
}

webpack.config.js

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HandlebarsPlugin = require('handlebars-webpack-plugin');
var path = require('path');

module.exports = {
    entry: './src/entries/app.js',
    output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'build')
},
    devServer: {
        open: true,
        overlay: true,
        watchContentBase: true
    },
    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
                options: {
                    failOnError: true
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    publicPath:'../',
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('./css/[name].css'),
        new HandlebarsPlugin ({
            entry: path.join(process.cwd(), "src/pages", "*.hbs"),
            output: path.join(process.cwd(), "build", "[name].html"),
            partials: [
                path.join(process.cwd(), "src/components", "*", "*.hbs")
            ],
        }),
        new webpack.HotModuleReplacementPlugin({})
    ]
};

Иерархия: иерархия

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.