Question

信息：我正在使用webpack 3.4.1和webpack-dev-server 2.5.1

使用以下配置'--hot --inline'，我得到一个非常慢的热重载。我可以删除'--hot'并快速重新加载，但我更喜欢使用热重载来动态更改css。

common.js

const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const { resolvePath } = require('./helpers');

const env = process.env.NODE_ENV;

const cssLoader = {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract('css-loader?sourceMap')
};

const lessLoader = {
    test: /\.less$/,
    loaders: ['style-loader', 'css-loader', 'less-loader']
}
const babelLoader = {
    test: /\.js?$/,
    include: [
        resolvePath('src/app'),
    ],
    exclude: /(node_modules)/,
    loader: 'babel-loader',
};

const htmlLoader = {
    test: /\.html$/,
    loader: 'ngtemplate-loader?relativeTo=' + resolvePath('src') + '/!html-loader'
};

const fontLoader = {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff'
};

const fileLoader = {
    test: /\.(ttf|eot|svg|otf|png|jpg|gif|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file-loader'
};

const jsonLoader = {
    test: /\.json$/,
    loader: 'json-loader'
};

const tinyMCELoader = {
    test: require.resolve('tinymce/tinymce'),
    loaders: [
      'imports-loader?this=>window',
      'exports-loader?window.tinymce'
    ]
}

const tinyMCEThemeLoader = {
    test: /tinymce\/(themes|plugins)\//,
    loader: 'imports-loader?this=>window'
}

const config = {
    devtool: 'inline-source-map',
    entry: {
        vendor: resolvePath('src/app/vendor.js'),
        app: resolvePath('src/app/app.js')
    },
    target: 'web',
    output: {
        path: resolvePath('public'),
        publicPath: '/',
        filename: '[name].js'
    },
    module: {
        loaders: [
            babelLoader,
            lessLoader,
            htmlLoader,
            cssLoader,
            fontLoader,
            fileLoader,
            jsonLoader,
            tinyMCELoader,
            tinyMCEThemeLoader
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        }),
        new ExtractTextPlugin('[name].[contenthash].css'),
        new htmlWebpackPlugin({
            template: resolvePath('public/index.ejs'),
            favicon: resolvePath('src/favicon.ico'),
            inject: true,
            env
        })
    ],
    resolve: {
        alias: {
            api: resolvePath('src/app/api/apiUrl.js')
        }
    }
};

module.exports = config;

和dev.js

const webpackMerge = require('webpack-merge');
const commonConfig = require('./common.js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { resolvePath } = require('./helpers');

const { HOST, PORT } = process.env;
const port = PORT || 1337;
const host = HOST || 'localhost';

const devConfig = {
    devtool: 'cheap-module-source-map',
    devServer: {
        contentBase: resolvePath('public'),
        port,
        host,
        historyApiFallback: true,
        watchOptions: {
            aggregateTimeout: 300,
            poll: 1000
        }
    },
    plugins: [
        new UglifyJsPlugin({
            include: ['vendor.js']
        })
    ]
};

module.exports = () => webpackMerge(commonConfig, devConfig);

我尝试删除Extract-Text-Plugin，但无济于事。任何想法快速重装？我正在考虑禁用vendor.js的编译，但我不知道在这里添加它。感谢。

Answer 1

我正在使用webpack 4，并且如下所示解决了这个问题：

-z nodefaultlib

必须快速开发NODE_ENV。

可以使用版本3。

Webpack Configuration

Webpack 3 Hot Reload很慢

1 个答案: