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

发布于 09-11 23:17 字数 3948 浏览 17 评论 0

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

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

但是打包出来的是
image.png
这个名字怎么变了呢?

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: {
}

}

`

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

喜爱纠缠2022-09-18 23:17:17

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

浮云落日2022-09-18 23:17:17

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文