css内容是打包在js文件中的,可以使用 mini-css-extract-plugin 插件提取成单独的css文件
安装:
npm i mini-css-extract-plugin -D
步骤:
1.在webpack.config.js中引入插件
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
2.在plugins 模块中使用插件
plugins:[new MiniCssExtractPlugin() ] 或者通过参数filename重新命名提职的css文件名 new MiniCssExtractPlugin({filename:’./css/demo.css’})
3.在css的rules中,使用MiniCssExtractPlugin.loader取代style-loader,提取js中css内容为单文件
{test:/.cssKaTeX parse error: Expected 'EOF', got '}' at position 49: …r,'css-loader']}̲ 如果是sass和less也…/,use:[MiniCssExtractPlugin.loader,‘css-loader’,‘sass-loader’]}
结果如图:
默认打包成main.css 如果想换名字:
如何合并css还需要其他的插件,后面再讲。