webpack4单独提取打包css的新实现extract-text-webpack-plugin)【注意，webpack4不推荐使用该插件，会出现各种莫名其妙的bug】正是基于对以上两种方式的不足的思考，结合我的实际使用过程，我认为以后应该彻底摒弃以上两种方式。这里推荐一个新的实现方式：file-loaderfile-loader给个file-loader的说明（传送门：https://github.com/webpack-co...；在我们的传统认知中，大多使用file-loader处理图片元素，其实如果你仔细阅读了上面的传送门，你就会明白我们一直被误导了下面我来举几个官方的使用例子传统图片处理module.exports={module:{规则:[{测试:/\.(png|jpg|gif)$/,使用:[{加载器:'file-loader',选项:{},},],},],},};处理css【本文重点】constpath=require('path');constCleanWebpackPlugin=require('clean-webpack-plugin');constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:{app:'./src1/index.js',print:'./src1/print.js'},输出：{filename:'[name].bundle.js',path:path.resolve(__dirname,'dist')},module:{rules:[{//加载器图像测试:/\.(png|svg|jpg|gif)$/,use:['file-loader']},{//处理字体test:/\.(woff|woff2|eot|ttf|otf)$/,use:['file-loader']},{//单独打包csstest:/\.css$/,use:['file-loader']}]},plugins:[newCleanWebpackPlugin(['dist']),newHtmlWebpackPlugin({title:'webpack4extractcssmethodofnew',template:'./src1/index.html',filename:'index.html',minify:{collapseWhitespace:true},hash:true})],mode:"production"};以上代码是我亲自测试过的，大家可以参考使用file-loader处理css后，不需要额外的插件。当然，如果需要指定输出的css文件名和路径，可以写user:['file-loader?name=[name].bundle[hash].css']等，这里的写法类似于get方法中传入的参数。之后的参数名称？符号仅供参考。如果您有更好的建议，请与我联系。不易，转载请注明出处，谢谢我是拉丁小猫，欢迎大家关注我，一起交流，共同进步。如果您有任何问题，请给我发电子邮件（util.you.com@gmail.com）
