extract-text-webpack-plugin이있는 일반 청크에 대해 CSS가 추출되지 않음

Question

버그 또는 설치 프로그램인지, CommonsChunkPlugin을 사용하여 프로젝트의 세 진입 점에 대해 별도의 common.js를 얻고 있는지, 그리고 css 파일을 얻으려면 extract-text-webpack-plugin을 사용하십시오. 내 진입 점은 app, login 및 register입니다. 내가 얻을 수 있어요 :

app.js 
app.vendor.js 
login.js 
register.js 
common.js 

CSS의 경우 :

app.css 
register.css 
login.css 

내가 common.css 생성 얻을 수없는 것. 모든 css는 하나의 app.css 파일에 들어갑니다.

내 프로젝트가 설치 vuetify 웹팩 템플릿을 기반으로합니다

3 진입 점 : 여기 https://github.com/vuetifyjs/webpack-advanced

나의 설정입니다

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: ['.*'] 
    } 
]) 

어떤 도움에 감사!

Answer 1

저는 매우 유사한 설정을 사용하고 있습니다. 필자의 경우 중요한 것은 .scss 파일 대신 .js 개의 파일에 일반 스타일을 가져 오는 것이 었습니다.

common/ 
    main.scss <-- common styles 
app/ 
    index.js 
    main.scss <-- styles specific for app 
admin/ 
    index.js 
    main.scss <-- styles specific for admin 
registration/ 
    index.js 
    main.scss <-- styles specific for registration 
base.html 
webpack.config.js 

---

app/index.js :

모두 admin/index.js 및 registration/index.js

import '../common/main' // <-- this did the trick! 
import './main' 

// some js... 

이 매우 유사

은 요컨대 여기에서 내 프로젝트입니다.

---

webpack.config.js (일부 ES6 구문을 사용하는 경우에만 중요한 부분) :

const entries = { 
    app: 'app/index.js', 
    admin: 'admin/index.js' 
    registration: 'registration/index.js', 
}; 

const commonChunks = [ 
    'vendor', 
    'common', 
]; 

function isVendor(module) { 
    if (typeof module.context !== 'string') { 
    return false; 
    } 
    return module.context.indexOf('node_modules') !== -1; 
} 

export default { 
    entry: {...entries}, 

    // ... 

    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'common', 
     filename: '[name].bundle.js', 
     minChunks: 2 
    }), 

    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     filename: '[name].bundle.js', 
     chunks: [...Object.keys(entries), 'common'], 
     minChunks: function(module) { 
     return isVendor(module); 
     } 
    }), 

    new ExtractTextPlugin({ 
     filename: '[name].bundle.css' 
    }), 

    new HtmlWebpackPlugin({ 
     template: path.resolve(__dirname, 'base.html'), 
     filename: 'app.html', 
     chunks: [...commonChunks, 'app'], 
     chunksSortMode: 'manual' 
    }), 

    new HtmlWebpackPlugin({ 
     template: path.resolve(__dirname, 'base.html'), 
     filename: 'admin.html', 
     chunks: [...commonChunks, 'admin'], 
     chunksSortMode: 'manual' 
    }), 

    new HtmlWebpackPlugin({ 
     template: path.resolve(__dirname, 'base.html'), 
     filename: 'registration.html', 
     chunks: [...commonChunks, 'registration'], 
     chunksSortMode: 'manual' 
    }) 
    ] 
}; 

---

내 초기 접근 다른 .scss 파일에 common/main.scss를 가져 오려면, 예를 들어,

app/main.scss

:

@import '../common/main' 

// styles specific for app 

그러나 그것은 작동하지 않았다 나는 위의 솔루션을 함께했다.

또한 HtmlWebpackPlugin에는 때로는 잘못된 순서로 스크립트가 포함되어 있었기 때문에 chunksSortMode: 'manual'을 추가해야했습니다.