webpack项目在dev模式的时候,每次更改会编译所有文件

Question

1. 项目是gulp + webpack的老项目
2. 启动开发服务器,改动代码,保存之后会编译所有文件,没有更改的也会编译,导致每次编译很慢,每次需要三分钟

webpack版本 2.7.0

配置

const webpackConfig = {
    devtool: devtool,
    entry: entry,
    output: {
        filename: "js/[name].js",
        path: path.join(process.cwd(), 'dist', 'assets'),
        publicPath: publicPath,
        chunkFilename: "js/ensure/[name]-[id]-[chunkhash].js",
        libraryTarget: 'umd'
    },
    resolve: {
        modules: [
            "node_modules",
            path.join(rootDir, "src/")
        ],
        alias: moduleConfig.alias
    },
    module: {
        //加载器配置
        loaders: [{ test: /\.css$/, use: 'happypack/loader?id=styles' },
            { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: 'happypack/loader?id=js'
            },
            {
                test: /\.vue$/,
                loader: 'happypack/loader?id=vue',
            },
            { test: /\.(html|tpl)$/, loader: 'art-template-loader' }
        ]
    },
    plugins: [
        new HappyPack({
            id: 'js',
            cache: true,
            threadPool: HappyThreadPool,
            loaders: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        'stage-3'
                    ],
                    plugins: ['syntax-dynamic-import']
                }
            }],               
        }),
        new HappyPack({
            id: 'styles',
            cache: true,
            threadPool: HappyThreadPool,
            loaders: [{
                loader: 'style-loader!css-loader' 
            }],               
        }), 
        new HappyPack({
            id: 'tpl',
            cache: true,
            threadPool: HappyThreadPool,
            loaders: [{
                loader: 'art-template-loader' 
            }],               
        }),                  
        new HappyPack({
            id: 'vue',
            loaders: [
                {
                    loader: 'vue-loader',
                    options: {
                        loaders: {
                            less: 'vue-style-loader!css-loader!less-loader'
                        }
                    }           
                },             
            ]
        }),
        new webpack.ProvidePlugin(moduleConfig.global),
        new webpack.DefinePlugin({
            'baseEnv': JSON.stringify(envConfig.baseEnv),
        }),
        new webpack.LoaderOptionsPlugin({
            debug: true
        }),
        new HtmlWebpackPlugin({
            filename: path.join(rootDir, "dist/index.html"),
            template: path.join(rootDir, "src/modules/index.html"),
            publicPath: config.dev.publicPath,
            hash: true
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.HotModuleReplacementPlugin() //热加载
    ],
};

Answer 1

你的入口有多少个文件？

Answer 2

楼主最后怎么解决的呢？我也碰到你这情况了....

Answer 3

移除这句 libraryTarget: 'umd'

Answer 4

我遇到过 是因为Es3ifyPlugin 这个webpack插件导致的 取消调就好了