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//truecsshtml
}
}, {
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()
]
}
I changed the above modules: true to false, although the style name did not become a hash value, but can apply the style, indicating that my css file is referenced, the reference is no problem, ask God to tell me where the configuration is wrong, thank you very much!