Merge pull request #3684 from thelounge/richrd/style-loading
Load styles from vue components, fix hot reload
This commit is contained in:
commit
fa57814678
@ -9,6 +9,10 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@import "../css/style.css";
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const constants = require("../js/constants");
|
||||
import Mousetrap from "mousetrap";
|
||||
|
@ -78,7 +78,10 @@ async function networkOrCache(event) {
|
||||
}
|
||||
|
||||
if (response.ok) {
|
||||
event.waitUntil(putInCache(event.request, response));
|
||||
if (cacheName !== "dev") {
|
||||
event.waitUntil(putInCache(event.request, response));
|
||||
}
|
||||
|
||||
return response.clone();
|
||||
}
|
||||
|
||||
|
@ -13,6 +13,19 @@ module.exports = (app) => {
|
||||
"webpack-hot-middleware/client?path=storage/__webpack_hmr"
|
||||
);
|
||||
|
||||
// Enable hot module reload support in mini-css-extract-plugin
|
||||
for (const rule of webpackConfig.module.rules) {
|
||||
if (!Array.isArray(rule.use)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
for (const use of rule.use) {
|
||||
if (use.options && typeof use.options.hmr !== "undefined") {
|
||||
use.options.hmr = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const compiler = webpack(webpackConfig);
|
||||
|
||||
app.use(
|
||||
|
@ -7,11 +7,11 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
const VueLoaderPlugin = require("vue-loader/lib/plugin");
|
||||
const Helper = require("./src/helper.js");
|
||||
|
||||
const isProduction = process.env.NODE_ENV === "production";
|
||||
const config = {
|
||||
mode: process.env.NODE_ENV === "production" ? "production" : "development",
|
||||
mode: isProduction ? "production" : "development",
|
||||
entry: {
|
||||
"js/bundle.js": [path.resolve(__dirname, "client/js/vue.js")],
|
||||
"css/style": path.resolve(__dirname, "client/css/style.css"),
|
||||
},
|
||||
devtool: "source-map",
|
||||
output: {
|
||||
@ -37,9 +37,13 @@ const config = {
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
include: [path.resolve(__dirname, "client")],
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
options: {
|
||||
hmr: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: "css-loader",
|
||||
options: {
|
||||
@ -83,8 +87,10 @@ const config = {
|
||||
json3: "JSON", // socket.io uses json3.js, but we do not target any browsers that need it
|
||||
},
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin(),
|
||||
new VueLoaderPlugin(),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: "css/style.css",
|
||||
}),
|
||||
new CopyPlugin([
|
||||
{
|
||||
from: "./node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff*",
|
||||
@ -103,7 +109,9 @@ const config = {
|
||||
from: "./client/service-worker.js",
|
||||
to: "[name].[ext]",
|
||||
transform(content) {
|
||||
return content.toString().replace("__HASH__", Helper.getVersionCacheBust());
|
||||
return content
|
||||
.toString()
|
||||
.replace("__HASH__", isProduction ? Helper.getVersionCacheBust() : "dev");
|
||||
},
|
||||
},
|
||||
{
|
||||
|
Loading…
Reference in New Issue
Block a user