Webpack часы меня подводят - PullRequest
0 голосов
/ 17 декабря 2018

РЕДАКТИРОВАТЬ: Это теперь решено.Этим утром я пришел на работу и подумал: «Ты пытался включить и выключить его снова?».Так я и сделал.Убрал node_modules, переустановил все пакеты - все заработало.FML.


Я обновляюсь до Webpack 4 и не могу заставить часы работать.Когда я запускаю скрипт наблюдения, все запускается, как и ожидалось, в первый раз, но при обновлении файла возникают ошибки.

Сценарии, которые я пробую:

"dev": "cross-env ENV=dev webpack --config config/bundling/webpack.config.js --mode=development",
"watch": "cross-env WATCH=true yarn run dev --watch"

(избыточность в переменных перекрестного envбудет исправлено позже)

Я получаю следующие ошибки:

"WARNING in configuration
The 'mode' option has not been set, webpack will fallback to
'production' for this value. Set 'mode' option to 'development' or
'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior.
Learn more: https://webpack.js.org/concepts/mode/"

"ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src
Module not found: Error: Can't resolve './src' in [MY PATH HERE]
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1]"

Кажется, что он не читает мой webpack.config.js или переменную режима on on watch?Кроме того, он преуспел в создании пакета, что привело меня к мысли, что это может быть проблемой исключительно со встроенным webpack-dev-server.

Я перепробовал все, что мог придумать, изменив сценарии,изменив синтаксис флага режима, установив режим в webpack.config.js, пробовал относительные пути, пробовал абсолютные пути, пробовал разные версии webpack и webpack-dev-server, перемещал мой файл конфигурации в корень проекта, жертвовал небольшим ЦПБогам кода - ничего не работает.

Я занимался этим несколько дней без какого-либо прогресса.Любая помощь будет оценена.

Версии:

"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"

Конфиг:

require('dotenv').config()
const CopyWebpackPlugin = require('copy-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')

const moduleRules = require('./module.rules')
const config = require('./editable.config')

module.exports = function() {

    const isDev = !!(process.env.ENV === 'dev')
    const isProd = !!(process.env.ENV === 'prod')
    const doServe = !!(process.env.SERVE === 'true')
    const doWatch = !!(process.env.WATCH === 'true')

    const webpackConfig = {

        // Set mode
        mode: isProd ? 'production' : 'development',

        // Entry points.
        entry: config.entrypoints,

        // JS output name and destination.
        output: {
            path: config.paths.public,
            filename: config.outputs.javascript.filename
        },

        // External dependencies.
        externals: config.externals,

        // Custom resolutions.
        resolve: config.resolve,

        // Rules for handling filetypes.
        module: {
            rules: [
                moduleRules.javascript,
                moduleRules.sass,
                moduleRules.fonts,
                moduleRules.images,
            ]
        },

        // Plugins running in every build.
        plugins: [
            new FriendlyErrorsWebpackPlugin(),
            new MiniCssExtractPlugin(config.outputs.css),
            new CleanWebpackPlugin(config.paths.public, { root: config.paths.root }),
            new CopyWebpackPlugin([{
                context: config.paths.images,
                from: {
                    glob: `${config.paths.images}/**/*`,
                    flatten: false,
                    dot: false
                },
                to: config.outputs.image.filename,
            }]),
            new CopyWebpackPlugin([{
                context: config.paths.fonts,
                from: {
                    glob: `${config.paths.fonts}/**/*`,
                    flatten: false,
                    dot: false
                },
                to: config.outputs.font.filename,
            }]),
        ],

        devtool: isDev ? config.settings.sourceMaps : false,

        watch: doWatch
    }

    // Set BrowserSync settings if serving
    if (doServe) {
        // setting our default settings...
        const browserSyncSettings = {
            host: 'localhost',
            port: 3000,
            proxy: process.env.HOME,
            files: [
                {
                    match: ['../../**/*.php'],
                    fn: function (event, file) {
                        if (event === 'change') {
                            this.reload()
                        }
                    }
                }
            ]
        }

        // ...and overwriting them with user settings
        Object.assign(browserSyncSettings, config.settings.browserSync)

        webpackConfig.plugins.push(new BrowserSyncPlugin(browserSyncSettings))
    }

    return webpackConfig;
}

Конфиг, часть 2

const path = require('path')

module.exports = {

    paths: {
        root: path.resolve(__dirname, '../../'),
        public: path.resolve(__dirname, '../../public'),
        src: path.resolve(__dirname, '../../src'),
        javascript: path.resolve(__dirname, '../../src/js'),
        sass: path.resolve(__dirname, '../../src/sass'),
        fonts: path.resolve(__dirname, '../../src/fonts'),
        images: path.resolve(__dirname, '../../src/images'),
        relative: '../../',
        external: /node_modules/
    },


    entrypoints: {
        main: ['./src/js/app.js', './src/sass/style.scss']
    },

    outputs: {
        javascript: { filename: 'js/[name].js' },
        css: { filename: 'css/[name].css' },
        font: { filename: 'fonts/[path][name].[ext]' },
        image: { filename: 'images/[path][name].[ext]' }
    },

    externals: {
    },

    resolve: {
    },


    settings: {
        sourceMaps: 'cheap-module-source-map',
        autoprefixer: {
            browsers: ['last 3 versions', '> 1%', 'ie >= 10'],
        },
        browserSync: {
            host: 'localhost',
            port: 3000
        }
    }
}

Бонусный вопрос: можно ли смотреть безWebpack 4 запускает новый devServer?Спасибо!<3 </p>

...