Question

编辑：现在已解决。今天早上上班去想，“您是否尝试过重新打开和关闭它？”。所以我做了。删除了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"

（cross-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或手表上的mode变量？而且，它成功地构建了捆绑软件，这使我意识到，仅内置的webpack-dev-server可能是一个问题。

我已经尝试了所有可以想到的事情，更改了脚本，更改了模式标志的语法，在webpack.config.js中设置了模式，尝试了相对路径，尝试了绝对路径，尝试了不同版本的webpack和webpack-开发服务器，将我的配置文件移至项目根目录，为代码之神牺牲了一个小型CPU-无效。

我已经待了好几天了，没有任何进展。任何帮助，将不胜感激。

版本：

"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

Webpack监视使我失败

0 个答案: