javascript – Webpack提取文本插件输出样式条目的.js和.css文件

前端之家收集整理的这篇文章主要介绍了javascript – Webpack提取文本插件输出样式条目的.js和.css文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
对于prod构建,我希望我的webpack配置有两个入口点,一个用于JS,一个用于SCSS,我希望将它们输出到两个单独的文件(一个JS,一个CSS).

但是,extract-text-webpack-plugin正在创建两个JS文件和一个CSS文件;即SCSS的入口点产生了所需的CSS文件和我不想要的JS文件.这个未使用的JS文件除了webpack样板外只包含其他内容,并且由extract-text-webpack-plugin删除.所以它正在完成它的工作,但仍然创建这个不必要的文件.我的webpack配置是(显示相关部分):

  1. const ExtractTextPlugin = require('extract-text-webpack-plugin');
  2.  
  3. module.exports = {
  4. entry: {
  5. app: './client/src/app.js',style: './client/src/app.scss'
  6. },output: {
  7. path: __dirname + '/server/assets/',publicPath: '/',filename: 'bundle.[chunkhash].js',},module: {
  8. loaders: [{
  9. test: /\.js/,exclude: /node_modules/,include: /src/,loader: 'babel-loader'
  10. },{
  11. test: /\.scss$/,loader: ExtractTextPlugin.extract('style','css','sass'),{
  12. test: /.*\.(woff|woff2|eot|ttf)$/i,loader: "url-loader?limit=10000&mimetype=application/font-woff"
  13. },{
  14. test: /.*\.(png|svg|jpg)$/i,loaders: [
  15. 'file?hash=sha512&digest=hex&name=[hash].[ext]','image-webpack?{progressive:true,optimizationLevel: 7,interlaced: false,pngquant:{quality: "65-90",speed: 4}}'
  16. ]
  17. }]
  18. },plugins: [
  19. new ExtractTextPlugin('bundle.[chunkhash].css',{
  20. allChunks: true
  21. })
  22. ]
  23. };

所以基本上输出是创建两个.js文件,每个条目一个,然后提取插件创建实际所需的.css文件.如何防止输出创建不必要的文件

解决方法

另一个选择是将app和样式块合并为一个:
  1. entry: {
  2. app: [
  3. './client/src/app.js','./client/src/app.scss'
  4. ]
  5. }

这样webpack将只生成一个块 – 应用程序.同时ExtractTextPlugin将从中删除任何.scss模块.内容将被放入包中.[chunkhash] .css.

猜你在找的JavaScript相关文章