此时我们需要 mini-css-extract-plugin 插件 详情查看：https://www.npmjs.com/package/mini-css-extract-plugin 安装 npm install mini-css-extract-plugin -D 使⽤ const path = require(‘path’) const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’); module.exports = { mode: ‘none’, entry: ‘./src/index.js’, output: { filename: ‘bundle.js’, path: path.join(__dirname, ‘dist’) }, module: { rules: [ { test: /.css$/, use: [ // ‘style-loader’, // 将 CSS 嵌⼊到 HTML 中（现在，不再需要 将 CSS 嵌⼊到 HTML 中） MiniCssExtractPlugin.loader // 将 CSS 打包到独⽴⽂件中 ‘css-loader’ ] }, { test :/.less$/, use: [ // ‘style-loader’, MiniCssExtractPlugin.loader ‘css-loader’, ‘less-loader’ ] } ] }, plugins: [ new MiniCssExtractPlugin({ // 指定输⼊位置和⽂件名称 filename: ‘css/[name].css’, } ), ], }

解决 CSS 中的图⽚引⼊问题

问题：将 CSS 单独打包到独⽴⽂件时，往往会发⽣路径的变更。 此时，CSS 中的背景图⽚地址可能需要更改。 解决：为 MiniCssExtractPlugin.loader 指定公共路径 { test: /.css$/, use: [ // ‘style-loader’, // 将 CSS 嵌⼊到 HTML 中（现在，不再需要 将 CSS 嵌⼊到 HTML 中） // MiniCssExtractPlugin.loader // 将 CSS 打包到独⽴⽂件中 { loader: MiniCssExtractPlugin.loader, options: { publicPath: ‘../‘ // 为背景图⽚指定路径 } }, ‘css-loader’ ] },