Не уверен, что это ошибка или просто моя настройка, я использую CommonsChunkPlugin, чтобы получить отдельный common.js для трех точек входа в моем проекте, и использую плагин extract-text-webpack-plugin для получения файлов css. Мои точки входа: приложение, вход и регистрация. Я могу получить:
app.js
app.vendor.js
login.js
register.js
common.js
Для CSS:
app.css
register.css
login.css
Кажется, я не могу сгенерировать common.css. Весь css запихивается в один файл app.css.
Мой проект настроен на основе шаблона веб-пакета vuetify: https://github.com/vuetifyjs/webpack-advanced
Вот моя конфигурация:
3 точки входа:
module.exports = {
entry: {
app: './src/main.js',
login: './src/Login/login.js',
register: './src/Register/register.js'
},
Плагины — у меня есть HtmlWebpackPlugin для каждой точки входа (показана только одна):
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: false,
hash: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: false,
minifyJS: true
},
chunksSortMode: appChunkOrder
}),
Общие куски:
new webpack.optimize.CommonsChunkPlugin({
name: 'app.vendor',
chunks: ['app'],
minChunks: isVendor,
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'login.vendor',
chunks: ['login'],
minChunks: isVendor,
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'register.vendor',
chunks: ['register'],
minChunks: isVendor,
}),
// Extract chunks common to both app and login
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
chunks: ['app.vendor', 'login.vendor', 'register.vendor', 'app', 'login', 'register'],
minChunks: (module, count) => count >= 2 && isVendor(module),
}),
Полный конфиг:
plugins: [
new webpack.DefinePlugin({'process.env': env }),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
// generate Html index files for 3 entries:
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: false,
hash: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: false,
minifyJS: true
},
chunksSortMode: appChunkOrder
}),
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'src/Login/login.html'
: config.build.login,
template: 'src/Login/login.html',
inject: false,
hash: true,
minify: false,
chunksSortMode: loginChunkOrder
}),
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'src/Register/register.html'
: config.build.register,
template: 'src/Register/register.html',
inject: false,
hash: true,
minify: false,
chunksSortMode: registerChunkOrder
}),
// Chunks:
new webpack.optimize.CommonsChunkPlugin({
name: 'app.vendor',
chunks: ['app'],
minChunks: isVendor,
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'login.vendor',
chunks: ['login'],
minChunks: isVendor,
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'register.vendor',
chunks: ['register'],
minChunks: isVendor,
}),
// Extract chunks common to both app and login
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
chunks: ['app.vendor', 'login.vendor', 'register.vendor', 'app', 'login', 'register'],
minChunks: (module, count) => count >= 2 && isVendor(module),
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
Любая помощь приветствуется!
