这是我的webpack.config.js
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
const extract = new ExtractTextPlugin({
filename: '../css/main.css'
});
module.exports = env => {
return {
entry: './src/js/scripts.js',
output: {
path: path.resolve(__dirname, 'dist/js'),
filename: 'bundle.js',
},
watch: true,
watchOptions: {
poll: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['env']
}
}
]
},
{
test: /\.scss$/,
use: extract.extract({
use: [
{
loader: 'css-loader',
options: {minimize: env.NODE_ENV === 'prod'}
},
{
loader: 'sass-loader'
}
]
})
},
{
test: /\.vue$/,
use: ['vue-loader']
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: env.NODE_ENV === "dev" ? [
extract
] : [
extract,
new UglifyJsPlugin()
]
}
};
这使得我的webpack编译大约需要2秒钟,总共少于10行的JS和SCSS代码组合在一起。在没有最小化的情况下运行它会更快(大约20ms)。
我已经尝试过OptimizeCssAssetsPlugin并且它同样很慢。如果我插入这两行
target: 'node', // in order to ignore built-in modules like path, fs, etc.
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
从此answer再次正常工作,但捆绑包会出现此错误
我想从gulp切换到webpack,因为模块化和简单,但这只会使缩小速度慢10倍。 Gulp在不到2秒的时间内缩小了5000多行SCSS代码。任何解决方案?
谢谢!