Merge pull request #373 from weseek/support/use-style-loader-in-dev

Support/use style loader in dev

config/webpack.common.js

@@ -10,15 +10,13 @@ const helpers = require('./helpers');
  */
 const AssetsPlugin = require('assets-webpack-plugin');
 const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 /*
  * Webpack configuration
  *
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
-module.exports = function (options) {
-  isProd = options.env === 'production';
+module.exports = function(options) {
   return {
     entry: {
       'app':                  './resource/js/app',
@@ -36,9 +34,9 @@ module.exports = function (options) {
     externals: {
       // require("jquery") is external and available
       //  on the global var jQuery
-      "jquery": "jQuery",
-      "emojione": "emojione",
-      "hljs": "hljs",
+      'jquery': 'jQuery',
+      'emojione': 'emojione',
+      'hljs': 'hljs',
     },
     resolve: {
       extensions: ['.js', '.json'],
@@ -56,26 +54,6 @@ module.exports = function (options) {
             }
           }]
         },
-        {
-          test: /\.scss$/,
-          use: ExtractTextPlugin.extract({
-            fallback: 'style-loader',
-            use: [
-              { loader: 'css-loader', options: {
-                sourceMap: !isProd,
-                minimize: isProd
-              } },
-              { loader: 'postcss-loader', options: {
-                sourceMap: !isProd,
-                plugins: (loader) => [
-                  require('autoprefixer')()
-                ]
-              } },
-              { loader: 'sass-loader', options: { sourceMap: !isProd } }
-            ]
-          }),
-          include: [helpers.root('resource/styles/scss')]
-        },
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader'],
@@ -127,8 +105,8 @@ module.exports = function (options) {
       new webpack.IgnorePlugin(/^\.\/lib\/deflate\.js/, /markdown-it-plantuml/),
 
       new webpack.ProvidePlugin({ // refs externals
-        jQuery: "jquery",
-        $: "jquery",
+        jQuery: 'jquery',
+        $: 'jquery',
       }),
 
     ]

config/webpack.dev.js

@@ -12,8 +12,6 @@ const commonConfig = require('./webpack.common.js');
 /*
  * Webpack Plugins
  */
-const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin;
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
@@ -22,17 +20,15 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
  */
 const ANALYZE = process.env.ANALYZE;
 const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
-const HOST = process.env.HOST || '0.0.0.0';
-const PORT = process.env.PORT || 3000;
 
 /*
  * Webpack configuration
  *
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
-module.exports = function (options) {
+module.exports = function(options) {
   return webpackMerge(commonConfig({ env: ENV }), {
-    devtool: 'cheap-module-source-map',
+    devtool: 'cheap-module-eval-source-map',
     entry: {
       dev: './resource/js/dev',
     },
@@ -40,7 +36,6 @@ module.exports = function (options) {
       path: helpers.root('public/js'),
       publicPath: '/js/',
       filename: '[name].bundle.js',
-      sourceMapFilename: '[file].map',
     },
     resolve: {
       extensions: ['.js', '.json'],
@@ -48,12 +43,27 @@ module.exports = function (options) {
     },
     module: {
       rules: [
+        {
+          test: /\.css$/,
+          use: [
+            'style-loader',
+            { loader: 'css-loader', options: { sourceMap: true } },
+          ],
+          include: [helpers.root('resource/styles/scss')]
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            'style-loader',
+            { loader: 'css-loader', options: { sourceMap: true } },
+            { loader: 'sass-loader', options: { sourceMap: true } },
+          ],
+          include: [helpers.root('resource/styles/scss')]
+        },
       ],
     },
     plugins: [
 
-      new ExtractTextPlugin('[name].bundle.css'),
-
       new DllBundlesPlugin({
         bundles: {
           vendor: [

config/webpack.prod.js

@@ -10,7 +10,6 @@ const commonConfig = require('./webpack.common.js'); // the settings that are co
 /**
  * Webpack Plugins
  */
-const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
 const OptimizeJsPlugin = require('optimize-js-plugin');
@@ -21,10 +20,8 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
  */
 const ANALYZE = process.env.ANALYZE;
 const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
-const HOST = process.env.HOST || 'localhost';
-const PORT = process.env.PORT || 3000;
 
-module.exports = function (env) {
+module.exports = function(env) {
   return webpackMerge(commonConfig({ env: ENV }), {
     devtool: undefined,
     output: {
@@ -36,6 +33,26 @@ module.exports = function (env) {
     },
     module: {
       rules: [
+        {
+          test: /\.scss$/,
+          use: ExtractTextPlugin.extract({
+            fallback: 'style-loader',
+            use: [
+              { loader: 'css-loader', options: {
+                sourceMap: false,
+                minimize: true
+              } },
+              { loader: 'postcss-loader', options: {
+                sourceMap: false,
+                plugins: (loader) => [
+                  require('autoprefixer')()
+                ]
+              } },
+              { loader: 'sass-loader', options: { sourceMap: false } }
+            ]
+          }),
+          include: [helpers.root('resource/styles/scss')]
+        }
       ]
     },
     plugins: [

lib/crowi/dev.js

@@ -1,11 +1,9 @@
 const debug = require('debug')('crowi:crowi:dev');
 const fs = require('fs');
 const path = require('path');
-const webpack = require('webpack');
-const helpers = require('./helpers');
 
 const swig = require('swig-templates');
-const onHeaders = require('on-headers')
+const onHeaders = require('on-headers');
 
 
 class CrowiDev {
@@ -29,7 +27,9 @@ class CrowiDev {
 
   initPromiseRejectionWarningHandler() {
     // https://qiita.com/syuilo/items/0800d7e44e93203c7285
+    /* eslint-disable no-console */
     process.on('unhandledRejection', console.dir);
+    /* eslint-enable */
   }
 
   initSwig() {
@@ -103,4 +103,4 @@ class CrowiDev {
   }
 }
 
-module.exports = CrowiDev
+module.exports = CrowiDev;

lib/views/admin/customize.html

@@ -3,8 +3,13 @@
 {% block html_title %}{{ customTitle(t('Customize')) }} {% endblock %}
 
 {% block style_css_block %}
-  <link rel="stylesheet" href="{{ webpack_asset('style').css }}">
-  <link rel="stylesheet" id="jssDefault" {# append id for theme selector #} href="{{ webpack_asset('style-theme-' + theme()).css }}">
+  {% if env === 'development' %}
+    <script src="{{ webpack_asset('style').js }}"></script>
+    <script src="{{ webpack_asset('style-theme-' + theme()).js }}"></script>
+  {% else %}
+    <link rel="stylesheet" href="{{ webpack_asset('style').css }}">
+    <link rel="stylesheet" id="jssDefault" {# append id for theme selector #} href="{{ webpack_asset('style-theme-' + theme()).css }}">
+  {% endif %}
 {% endblock %}
 
 {% block html_additional_headers %}
@@ -52,6 +57,12 @@
         <fieldset>
           <legend>{{ t('customize_page.Theme') }}</legend>
 
+          {% if env === 'development' %}
+            <div class="alert alert-warning">
+              <strong>DEBUG MESSAGE:</strong> development build では、リアルタイムプレビューが無効になります
+            </div>
+          {% endif %}
+
           <div id="themeOptions">
             {# Light Themes #}
             <div class="d-flex">
@@ -501,12 +512,12 @@ window.addEventListener('load', (event) => {
       $(this).submit(function()
       {
         function showMessage(formId, msg, status) {
-          $('#' + formId + ' .alert').remove();
+          $('#' + formId + ' #alert-results').remove();
 
           if (!status) {
             status = 'success';
           }
-          var $message = $('<p class="alert"></p>');
+          var $message = $('<p id="alert-results" class="alert"></p>');
           $message.addClass('alert-' + status);
           $message.html(msg.replace('\n', '<br>'));
           $message.insertAfter('#' + formId + ' legend');

lib/views/layout/layout.html

@@ -83,8 +83,13 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
 
   <!-- styles -->
   {% block style_css_block %}
-  <link rel="stylesheet" href="{{ webpack_asset('style').css }}">
-  <link rel="stylesheet" href="{{ webpack_asset('style-theme-' + theme()).css }}">
+    {% if env === 'development' %}
+      <script src="{{ webpack_asset('style').js }}"></script>
+      <script src="{{ webpack_asset('style-theme-' + theme()).js }}"></script>
+    {% else %}
+      <link rel="stylesheet" href="{{ webpack_asset('style').css }}">
+      <link rel="stylesheet" href="{{ webpack_asset('style-theme-' + theme()).css }}">
+    {% endif %}
   {% endblock %}
 
   <!-- Google Fonts -->