Twitter bootstrap 在laravel 5.4（.css和.map，都在一个.css文件中）中，通过网页从sass编译引导到css文件太大

我将网页包从sass编译为css，但.map和.css文件都在一个.css文件中。所以这个文件太大了。仅约650kb引导v4 alpha

在BootstrapV4的css文件夹中，它是独立的

那么，我可以通过webpack将它从sass分离到css

这是我的网页配置

let path=require'path'； 让webpack=require'webpack'； 让Mix=require'laravel-Mix'.config； 让plugins=require'laravel-mix'。插件； /* |------------------------------------- |混合初始化 |------------------------------------- | |作为第一步，我们需要项目的Laravel Mix文件 |并记录用户请求的编译和构建步骤。 |一旦这些步骤被记录下来，我们就可以开始工作了。 | */ 混合初始化； /* |------------------------------------- |网页包上下文 |------------------------------------- | |此道具将在运行Webpack时确定适当的上下文。 |因为您可以选择发布此webpack.config.js文件 |对于您的项目根，我们将为您动态设置路径。 | */ module.exports.context=Mix.path.root； /* |------------------------------------- |网页条目 |------------------------------------- | |我们将首先指定Webpack的入口点。默认情况下，我们将 |假设只有一个捆绑文件，但可以调用Mix.extract |专门为供应商库制作单独的捆绑包。 | */ module.exports.entry=Mix.entry； /* |------------------------------------- |网页包输出 |------------------------------------- | |Webpack自然要求我们指定所需的输出路径和 |文件名。我们将简单地使用Mix.js响应您传递给的内容。 |注意，对于Mix.version，我们将正确地散列该文件。 | */ module.exports.output=Mix.output； /* |------------------------------------- |规则 |------------------------------------- | |网页包规则允许我们注册任意数量的加载程序和选项。 |开箱即用，我们将为您提供一把启动和运行 |尽可能快，但请随意添加到此列表。 | */ 让vueExtractTextPlugin=false； 如果Mix.options.extractVueStyles{ vueExtractTextPlugin=Mix.vueExtractTextPlugin； module.exports.plugins=module.exports.plugins | |【】.concatvueextractextplugin； } module.exports.module={ 规则：[ { 测试：/\.vue$/,， 加载程序：“vue加载程序”， 选项：{ 装载机：Mix.options.extractVueStyles{ js:'babel loader'+Mix.babelConfig， scss:vueExtractTextPlugin.extract{ 使用：“css加载器！sass加载器”， 回退：“vue样式加载程序” }, sass:vueExtractTextPlugin.extract{ 使用：“css加载程序！sass加载程序？缩进语法”， 回退：“vue样式加载程序” }, 手写笔：vueExtractTextPlugin.extract{ 使用：“css加载器！手写笔加载器？路径[]=节点_模块”， 回退：“vue样式加载程序” }, css:vueExtractTextPlugin.extract{ 使用：“css加载器”， 回退：“vue样式加载程序” } }: { js:'babel loader'+Mix.babelConfig， scss:'vue样式加载程序！css加载程序！sass加载程序'， sass:'vue样式加载程序！css加载程序！sass加载程序？缩进语法'， 手写笔：“vue样式加载程序！css加载程序！手写笔加载程序？路径[]=节点\u模块” }, postsss:Mix.options.postsss } }, { 测试：/\.jsx？$/,， 排除：/node_模块| bower_组件/， 加载器：“巴贝尔加载器”+Mix.babelConfig }, { 测试：/\.css$/,， 加载器：['style-loader'，'css-loader'] }, { 测试：/\.s[ac]ss$/,， 包括：/node\u模块/， 加载器：['style-loader'，'css-loader'，'sass-loader'] }, { 测试：/\.html$/,， 加载程序：['html-loader'] }, { 测试：/\.png | jpe？g | gif$/,， 加载器：“文件加载器”， 选项：{ 名称：'images/[name].[ext]？[hash]'， publicPath:Mix.resourceRoot } }, { 测试：/\.woff2？| ttf | eot | svg | otf$/,， 加载器：“文件加载器”， 选项：{ 名称：'fonts/[name].[ext]？[hash]'， publicPath:Mix.resourceRoot } }, { 测试：/\.cur|ani$/,， 加载器：“文件加载器”， 选项：{ 名称：'[name].[ext]？[h] ",， publicPath:Mix.resourceRoot } } ] }; 如果是混合预处理器{ Mix.preprocessors.forEachpreprocessor=>{ module.exports.module.rules.pushpreprocessor.rules； module.exports.plugins=module.exports.plugins | |【】.concatpreprocessor.extractPlugin； }; } /* |------------------------------------- |决心 |------------------------------------- | |在这里，我们可以设置任何影响Web包解析的选项/别名 |模块的数量。首先，我们将为您提供必要的Vue别名 |加载Vue公共库。如果需要，您可以删除此项。 | */ module.exports.resolve={ 扩展：['*'、'.js'、'.jsx'、'.vue']， 别名：{ “vue$”：“vue/dist/vue.common.js” } }; /* |------------------------------------- |统计数据 |------------------------------------- | |默认情况下，Webpack会向终端吐出大量信息， |每次编译时。让我们把事情尽量简化一点 |把那些零碎的东西藏起来。你想怎么调整就怎么调整。 | */ module.exports.stats={ 哈什：错， 版本：false， 时间：错误， 孩子们：错， 错误：错误 }; process.nodepreaction=true； module.exports.performance={hits:false}； /* |------------------------------------- |开发工具 |------------------------------------- | |Sourcemaps允许我们在 |浏览器，即使我们提供的是捆绑脚本或样式表。 |您可以通过添加Mix.sourcemaps来激活sourcemaps。 | */ module.exports.devtool=Mix.sourcemaps； /* |------------------------------------- |网页包开发服务器配置 |------------------------------------- | |如果您想使用这种华而不实的热模块更换功能，那么 |我们已经掩护你了。在这里，我们将设置一些基本的初始配置 |对于节点服务器。您很可能不想编辑此内容。 | */ module.exports.devServer={ 历史上的倒退：是的， 没错， 是的， 安静：是的 }; /* |------------------------------------- |插件 |------------------------------------- | |最后，我们将注册一些插件来扩展和配置 |网页包。为了让您开始，我们提供了一些有用的 |扩展，用于版本控制、操作系统通知等。 | */ module.exports.plugins=module.exports.plugins | | |[]concat[ 新的webpack.ProvidePluginMix.autoload | |{ jQuery:'jQuery'， $：“jquery”， jquery:'jquery' }, 新插件。FriendlyErrorsWebpackPlugin， 新插件。StatsWriterPlugin{ 文件名：“mix manifest.json”， 转换：Mix.manifest.transform.bindMix.manifest， }, 新plugins.WebpackMd5HashPlugin， 新的webpack.LoaderOptionsPlugin{ 最小化：混合生产， 选项：{ postsss:Mix.options.postsss， 上下文：_dirname， 输出：{path:'./'} } } ]; 如果Mix.browserSync{ module.exports.plugins.push 新插件。BrowserSyncPlugin Object.assign{ 主机：“localhost”， 港口：3000， 代理：“app.dev”， 档案：[ “app/***.php”， “resources/views/***.php”， “public/js/***.js”， “public/css/***.css” ] }，Mix.browserSync， { 重新加载：false } ; } 如果混合通知{ module.exports.plugins.push 新插件.WebpackNotifierPlugin{ 标题：“拉雷维尔混音”， 总是这么说：是的， contentImage:Mix.path.root'node_modules/laravel Mix/icons/laravel.png' } ; } 如果混音，复制{ Mix.copy.forEachcopy=>{ module.exports.plugins.push 新插件。CopyWebpackPlugin[复制] ; }; } 如果混合提取{ module.exports.plugins.push 新建webpack.optimize.commonChunkPlugin{ 名称：Mix.entryBuilder.extractions.concat[ path.joinMix.js.base，“manifest”.replace/\\\/g，'/' ], minChunks：无限 } ; } 如果混合在生产中{ module.exports.plugins.push 新的webpack.DefinePlugin{ “process.env”：{ 节点_ENV:'生产' } }, 新建webpack.optimize.UglifyJsPluginMix.options.uglify ; } module.exports.plugins.push 新plugins.WebpackOnBuildPlugin stats=>Mix.events.fire'build'，stats ; /* |------------------------------------- |混合定型 |------------------------------------- | |现在我们已经声明了我们的整个网页包配置 |最后一步是扫描Mix文件中的任何自定义配置。 |如果调用mix.webpackConfig，我们将合并它，并构建！ | */ Mix.finalizeemodule.exports 更改module.exports.devtool=Mix.sourcemaps；修改 ule.exports.devtool='source-map'

我发现laravel mix将devtool设置为内联源代码映射

---

ps:inline source map-将SourceMap作为DataUrl添加到JavaScript文件。

显示您的网页配置。我已更新了上面的答案-@wuxindiejiaw。它的工作：D。css引导文件只有180kb。谢谢