webpack使用ExtractTextPlugin+css-loader时类名并没有打包成哈希值?
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文件是引用到了,引用没有问题,求大神告知,我哪里配置错误了,万分感谢!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
设置css-loader modules模块化之后
引入css的请按如下方式