webpack使用ExtractTextPlugin+css-loader时类名并没有打包成哈希值?

发布于 2022-09-06 23:28:30 字数 2330 浏览 29 评论 0

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {

entry: __dirname + "/src/main.js", //入口文件
output: {
    path: __dirname + "/dist", //打包后导出文件夹
    filename: "bundle.js" //导出的文件名
},

// devtool: 'cheap-module-source-map',

module: {
    loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        },
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        },
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [{
                    loader: "css-loader",
                    options: {
                        modules: true//在这里我设置为true了,可是实际上css文件里的样式名变为哈希值了,可是打包后的html文件引用的地方却没有打包成哈希值,导致我应用不上样式
                    }
                }, {
                    loader: "postcss-loader"
                }]
            })
        }, {
            test: /\.(gif|png|jpg|svg)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 1024,
                    name: 'images/[name]-[hash:8].[ext]'
                }
            }]
        }
    ]
},
resolve: {
    alias: {
        'vue$': 'vue/dist/vue.js'
    }
},
devServer: {
    contentBase: "./dist", //本地服务器所加载的页面所在的目录
    stats: {
        colors: true
    }, 
    historyApiFallback: true, 
    inline: true,
    hot: true
},
plugins: [
    new webpack.BannerPlugin('版权所有,翻版必究'),
    new HtmlWebpackPlugin({
        template: __dirname + "/index.html" 
    }),
    new ExtractTextPlugin("style.css"),
    new webpack.HotModuleReplacementPlugin() 
]

}

我把上述的modules: true改为false以后,虽然样式名没有变为哈希值,但是能应用上样式了,说明我的css文件是引用到了,引用没有问题,求大神告知,我哪里配置错误了,万分感谢!
这是打包后的css文件

这是html,因为没有变成哈希值,故没有应用上样式

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

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

发布评论

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

评论(1

饮惑 2022-09-13 23:28:30

设置css-loader modules模块化之后
引入css的请按如下方式

const styles = require("你的样式表路径")
或者
import styles from '你的样式表路径'; //  “styles” 你可以随便改一个词 

css:
    sectionOne:{color:#red;}
html    
    <div className={styles.sectionOne}></div>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文