dev-server тратит много времени на перестройку проекта в webpack 4 - PullRequest
Новая
       6

dev-server тратит много времени на перестройку проекта в webpack 4

0 голосов
/ 26 сентября 2018

я разработал приложение реагирования, до этого я создавал то же самое приложение на веб-пакете v3, теперь я обновляюсь до v4.
на v3 dev-server оно работало нормально, но на v4 это отнимает много времениbuild и каждый раз его сборка весь проект снова (может быть поэтому)
my webpack.dev.js 

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    devtool: 'inline-source-map',  
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                loader: "babel-loader"
                }
            },
            {
                test: /\.s?css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            minimize:false,
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },{
            test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
            loader: "file-loader",
            }
        ]
    },
    plugins: [ 
        new MiniCssExtractPlugin({
            filename: 'styles.css',
        }),
        new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html'
        }),
        new webpack.DefinePlugin({
            'process.env': {
            'NODE_ENV': JSON.stringify('development')
            }
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        historyApiFallback: true,
        host:'0.0.0.0',
        disableHostCheck: true,
    }
};

и myскрипты в package.json 

"scripts": {
    "start": "node server/server.js",
    "build": "webpack --mode production --config=webpack.prod.js",
    "dev": "webpack --mode development --config=webpack.dev.js",
    "dev-server": "webpack-dev-server --config=webpack.dev.js"
  }

это показывает мне ошибку

Вы в настоящее время используете минимизированный код вне NODE_ENV === «производство».Это означает, что вы используете более медленную сборку Redux.Вы можете использовать Свободно-envify (https://github.com/zertosh/loose-envify) для browserify или DefinePlugin для веб-пакета (http://stackoverflow.com/questions/30030031), чтобы убедиться, что у вас есть правильный код для вашей производственной сборки.

, но если console my process.env.NODE_ENV varialbe это показывает мне развитие

у меня две проблемы с dev-сервером в режиме разработки
1) как я могу сократить времяперестройки на dev-сервере 2) в режиме разработки и почему он показывает мне production error.

Ответы [ 3 ]

0 голосов
/ 27 сентября 2018

Добавление кэширования к babel-loader может сбрить время: 

{
  test: /\.jsx?$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true,
        cacheCompression: false
      }
    }
  ]
}

https://github.com/babel/babel-loader#options

0 голосов
/ 27 сентября 2018

Ответ таков: вы используете inline-source-map devtool, который вызывает процесс сборки и восстановления супер медленный .

Согласно Официальному документу Webpack ,они сказали:

Выберите стиль отображения источника для улучшения процесса отладки.Эти значения могут существенно повлиять на скорость сборки и восстановления.

enter image description here

Для получения дополнительной информации вы можете прочитать ее здесь: https://webpack.js.org/configuration/devtool/#devtool

Надеюсь, это поможет!

0 голосов
/ 26 сентября 2018

Ваш сервер разработки работает в рабочем режиме, потому что вы не установили аргумент --mode development в своем скрипте dev-server NPM.Кажется, что это не требуется, поскольку webpack-dev-server, в конце концов, является сервером разработки, но аргумент все еще необходим. 

"dev-server": "webpack-dev-server --mode development --config webpack.dev.js"

Чтобы ускорить сборку в разработке, внедрите все CSSв HTML с style-loader вместо извлечения CSS в отдельный файл.См. Следующий код, в котором я удалил mini-css-extract-plugin и его загрузчик. 

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    devtool: 'inline-source-map',  
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.s?css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            minimize:false,
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
                loader: 'file-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        historyApiFallback: true,
        host:'0.0.0.0',
        disableHostCheck: true,
    }
};

Создание исходных карт также замедлит сборку, поэтому подумайте, действительно ли они вам нужны.

...