Почему веб-пакет не компилирует файлы полностью? - PullRequest
Новая
       10

Почему веб-пакет не компилирует файлы полностью?

0 голосов
/ 27 апреля 2018

Когда я строил проект с помощью веб-пакета, вывод index.js невелик (388 kB), но он не включает последние изменения. Затем, через несколько секунд (возможно, после посещения веб-сайта один раз), веб-пакет, кажется, перекомпилировал все полностью и сгенерировал гораздо больший index.js ( 24,9 МБ`). Webpack делает это нарочно? Я имею в виду сначала скомпилировать минимум, а потом скомпилировать полностью? Если да, есть ли способ заставить веб-пакет сделать это при первом запуске? Спасибо ~!

PS: помимо веб-пакета мы используем Vue, nodejs, D3 и т. Д. Но я не думаю, что был какой-либо конфликт.

Обновление: вставьте сюда конфигурацию 

'use strict';
const webpack = require('webpack');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
let merge = require('webpack-merge');
let baseWebpackConfig = require('./webpack.config');

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
    baseWebpackConfig.entry[name] = ['./tool/dev-client'].concat(baseWebpackConfig.entry[name]);
});

/**
 * demo config
 *
 * @type {Object}
 */

module.exports = merge(baseWebpackConfig, {
    // cheap-module-eval-source-map is faster for development
    devtool: '#cheap-module-eval-source-map',
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': '"demo"'  //  only diff from webpack.dev.config.js
            }
        }),
        // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        // https://github.com/ampedandwired/html-webpack-plugin
        new FriendlyErrorsPlugin()
    ]
});

А baseWebpackConfig

'use strict';
const webpack = require('webpack');
const path = require('path');
const projectPath = path.resolve(__dirname, '..');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const argv = require('yargs').argv;
const isDev = process.env.NODE_ENV === 'dev';
const entry = require('./entry');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

function getLoaders(isDev, ext) {
    let arr = ['css-loader'];
    if (ext) {
        arr.push(ext + '-loader');
    }
    if (isDev) {
        arr.unshift('style-loader');
        return arr;
    }

    return ExtractTextPlugin.extract({
        use: arr,
        fallback: 'style-loader'
    });

}

/**
 * entry config
 *
 * @type {Object}
 */

const ENTR_CONFIG = entry.get(argv.app, argv.template);
/**
 * webpack config
 *
 * @type {Object}
 */
const config = {
    entry: ENTR_CONFIG.module,
    output: {
        path: path.resolve(projectPath, 'dist'),
        filename: '[name].[hash].js'
    },
    resolve: {

        alias: {
            axios: 'axios/dist/axios.min.js',
            'vue$': 'vue/dist/vue.esm.js',
            '@': path.resolve(projectPath, 'src'),
            style: path.resolve(__dirname, '../src/style')
        },

        extensions: ['.js', '.json', '.styl', '.css', '.html', '.vue']
    },

    module: {
        noParse: [
            /node_modules\/(axios)\//
        ],
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                include: [
                    path.resolve(projectPath, 'src')
                ],
                loader: 'babel-loader'
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.html/,
                loader: 'html-loader',
                options: {
                    minimize: false
                }
            },
            {
                test: /\.css$/,
                use: getLoaders(isDev)
            },
            {
                test: /\.styl$/,
                use: getLoaders(isDev, 'stylus')
            },
            {
                test: /\.(gif|png|jpe?g|svg|wav)$/i,
                loader: 'file-loader',
                options: {
                    name: 'assets/[name].[hash].[ext]'
                }
            },
            {
                test: /\.woff2?$/,
                loader: 'url-loader',
                options: {
                    name: 'fonts/[name].[hash].[ext]',
                    limit: '10000',
                    mimetype: 'application/font-woff'
                }
            },
            {
                test: /\.(ttf|eot)$/,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[hash].[ext]'
                }
            }
        ]
    },
    plugins: [

        new CaseSensitivePathsPlugin(),
        new webpack.LoaderOptionsPlugin({
            test: /\.(styl)$/
        }),
        new ExtractTextPlugin({filename: '[name].css'})
    ],
    externals: {
        dagreD3: 'dagre-d3',
    }
};

// template config
config.plugins = config.plugins.concat(ENTR_CONFIG.template);

module.exports = config;

И сценарий оболочки триггера выглядит так: 

./node_modules/.bin/webpack --watch --config tool/webpack.demo.config.js --output-path=../visualdl/server/dist &
...