Merge pull request #3684 from thelounge/richrd/style-loading

Load styles from vue components, fix hot reload
This commit is contained in:
Pavel Djundik 2020-01-10 20:03:24 +02:00 committed by GitHub
commit fa57814678
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 35 additions and 7 deletions

View File

@ -9,6 +9,10 @@
</div>
</template>
<style>
@import "../css/style.css";
</style>
<script>
const constants = require("../js/constants");
import Mousetrap from "mousetrap";

View File

@ -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();
}

View File

@ -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(

View File

@ -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");
},
},
{