mini-css-extract-plugin 抽离css打包import不输出css

Question

参考webpack4 mini-css-extract-plugin production模式不输出css

1. 将引入的样式使用require的时候 打包可以打包出来， import不可以
2. 我引入的是

但是打包出来的是

这个名字怎么变了呢?

webpack.base.config.js
`

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
entry: {
    // 配置文件的入口
    main: path.resolve(__dirname, '../src/main.js'),
    // 将不变的代码分开打包
    framework:['react','react-dom']
},
output: {
    // 打包文件的出口
    path: path.resolve(__dirname, '../dist'),
},
module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            loader: 'babel-loader' // 将代码与babel联系起来
        },
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: 'img/[name].[hash:7].[ext]'
            }
        },
        {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: 'media/[name].[hash:7].[ext]'
            }
        },
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: 'fonts/[name].[hash:7].[ext]'
            }
        },
        // postcss-loader autoprefixer 用于添加css3前缀
        {
            test: /\.(sass|scss)$/,
            use: [
                // css抽离
                {
        loader: MiniCssExtractPlugin.loader,
        options: {
          // only enable hot in development
          hmr: process.env.NODE_ENV === 'development',
          // if hmr does not work, this is a forceful method.
          reloadAll: true,
        },
      },
                {
                    loader: "css-loader", // 将 CSS 转化成 CommonJS 模块
                    options: {
                        importLoaders: 2,  // 识别在sass文件中的引用的sass文件，防止不通过sassloader直接走cssloader
                        modules: true,
                        localIdentName: '[local]--[hash:base64:8]'
                    }
                },
                {
                    loader: "sass-loader" // 将 Sass 编译成 CSS
                },
                'postcss-loader'
            ]
        },
        {
            test: /\.css$/,
            use: [
                // css抽离
                {
        loader: MiniCssExtractPlugin.loader,
        options: {
          // only enable hot in development
          hmr: process.env.NODE_ENV === 'development',
          // if hmr does not work, this is a forceful method.
          reloadAll: true,
        },
      },
                {
                    loader: 'css-loader'
                },
                {
                    loader: 'postcss-loader'
                }
            ]
        }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
        // 指定一个html 模板
        template: path.resolve(__dirname, '../public/index.html'),
        title: '谋动|谋定而后动',
        inject: "body",
        favicon: path.resolve(__dirname, '../public/favicon.ico'),
        // html 文件的压缩
        minify: {
            //是否去除空格，默认false
            collapseWhitespace: true,
            //是否移除注释 默认false
            removeComments: true,
            //是否对大小写敏感，默认false
            caseSensitive: true
        }
    }),
    // css抽离
    new MiniCssExtractPlugin({
        filename: devMode ? '[name].css' : 'css/[name].[hash].css',
  chunkFilename: devMode ? '[id].css' : 'css/[id].[hash].css',
    })
],
optimization: {
}

}

`

Answer 1

打包出来名字是 main.css 因为你 entry 处做了代码切分，是正常现象。至于 import 不出问题，没遇到过。

Answer 2

我也遇到了同样的问题，请问楼主最后知道为啥了吗？