对于prod构建,我希望我的webpack配置有两个入口点,一个用于JS,一个用于SCSS,我希望将它们输出到两个单独的文件(一个JS,一个CSS)。
然而,extract-text-webpack-plugin正在创建两个JS文件和一个CSS文件;即SCSS的入口点产生了所需的CSS文件和我不想要的JS文件。这个未使用的JS文件除了webpack样板和// removed by extract-text-webpack-plugin
之外什么都没有。所以它正在完成它的工作,但仍然创建这个不必要的文件。我的webpack配置是(显示相关部分):
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
app: './client/src/app.js',
style: './client/src/app.scss'
},
output: {
path: __dirname + '/server/assets/',
publicPath: '/',
filename: 'bundle.[chunkhash].js',
},
module: {
loaders: [{
test: /\.js/,
exclude: /node_modules/,
include: /src/,
loader: 'babel-loader'
},{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css', 'sass'),
},{
test: /.*\.(woff|woff2|eot|ttf)$/i,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},{
test: /.*\.(png|svg|jpg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}'
]
}]
},
plugins: [
new ExtractTextPlugin('bundle.[chunkhash].css', {
allChunks: true
})
]
};
所以基本上输出是创建两个.js文件,每个条目一个,然后提取插件创建实际所需的.css文件。如何防止输出创建不必要的文件?
答案 0 :(得分:8)
另一个选项是将app
和style
块合并为一个:
entry: {
app: [
'./client/src/app.js',
'./client/src/app.scss'
]
}
这样webpack只会产生一个块 - app
。同时ExtractTextPlugin
将从中删除任何.scss
个模块。内容将放入bundle.[chunkhash].css
。
答案 1 :(得分:4)
从webpack配置中删除style
入口点:
module.exports = {
entry: {
app: './client/src/app.js'
},
// ...
}
然后require
来自app.js
文件:
// app.js
require('./app.scss');
// ...
答案 2 :(得分:0)
我将webpack plugin放在一起根据最终输出大小删除多余文件 - 假设这些文件往往非常小,似乎只是检查它们有多大并删除小文件,无用的。
使用npm
或yarn
npm install webpack-extraneous-file-cleanup-plugin --save-dev
yarn add webpack-extraneous-file-cleanup-plugin --dev
在webpack.config.js
文件中:
const ExtraneousFileCleanupPlugin = require('webpack-extraneous-file-cleanup-plugin');
module.exports = {
...
plugins: [
new ExtraneousFileCleanupPlugin({
extensions: ['.js']
})
]
}
上查看完整的选项列表