add loader image

partyk · Jun 4, 2019 · f2f67ea · f2f67ea
1 parent 3d3e739
commit f2f67ea
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 14 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -2,8 +2,12 @@
 <html>
 <head>
     <title>Getting Started</title>
+    <link rel="stylesheet" type="text/css" href="/assets/css/style.css">
 </head>
 <body>
-    <script src="/assets/js/main.js"></script>
+    <div class="box1">box 1</div>
+    <div class="box2">box 2</div>
+    <script src="/assets/js/main.js" async defer></script>
+    <script src="/assets/js/style.js" async defer></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "eslint": "^5.14.1",
     "eslint-config-standart-partyk": "^1.6.5",
     "eslint-loader": "^2.1.2",
+    "file-loader": "^3.0.1",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "imagemin-webpack-plugin": "^2.4.2",
     "mini-css-extract-plugin": "^0.5.0",

diff --git a/src/css/src/style.css b/src/css/src/style.css
@@ -1,4 +1,20 @@
-.aaa {
-    margin: 0;
-    padding: 0;
+.box1 {
+    display: flex;
+    width: 100px;
+    height: 100px;
+    background: aqua;
+    justify-content: center;
+    align-items: center;
+}
+
+.box2 {
+    display: flex;
+    width: 200px;
+    height: 200px;
+    color:#FFF;
+    background: aqua;
+    justify-content: center;
+    align-items: center;
+    background: no-repeat url('./../../images/rose-blue-flower-rose-blooms-67636.jpeg') center;
+    background-size: auto;
 }
diff --git a/src/images/rose-blue-flower-rose-blooms-67636.jpeg b/src/images/rose-blue-flower-rose-blooms-67636.jpeg
diff --git a/src/js/modules/test.js b/src/js/modules/test.js
@@ -1,2 +1 @@
-console.log('test module');
-alert('aaa');
+console.log('test module OK');
diff --git a/webpack.common.js b/webpack.common.js
@@ -29,8 +29,9 @@ module.exports = merge(
     loaders.loadESLint(undefined, ['/node_modules/']),
     loaders.loadJS(),
     loaders.loadCSS(),
+    loaders.loadImage(),
     plugins.friendlyErrors(),
-    plugins.imageMin()
+    plugins.imageMin()// ,
     // plugins.dashboard(),
     // plugins.browserSync()
 );
diff --git a/webpack.dev.js b/webpack.dev.js
@@ -2,11 +2,14 @@
 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 
+/* globals */
+// global.isProduction = true;
+
 /* loaders */
 // const loaders = require('./webpack/webpack.loaders');
 
 /* plugins */
-const plugins = require('./webpack/webpack.plugins');
+// const plugins = require('./webpack/webpack.plugins');
 
 module.exports = merge(common, {
     mode: 'development',
@@ -16,6 +19,6 @@ module.exports = merge(common, {
     },
     watch: true,
     watchOptions: {
-        ignored: /node_modules/,
+        ignored: /node_modules/
     }
 });
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -1,6 +1,9 @@
 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 
+/* globals */
+global.isProduction = true;
+
 /* plugins */
 const TerserPlugin = require('terser-webpack-plugin');
 
@@ -17,7 +20,7 @@ const terserOptions = {
     ie8: false,
     keep_classnames: undefined,
     keep_fnames: false,
-    safari10: false,
+    safari10: false
 };
 
 module.exports = merge(common, {
@@ -28,8 +31,8 @@ module.exports = merge(common, {
                 // exclude: /\/excludes/,
                 test: /\.js(\?.*)?$/i,
                 terserOptions
-            }),
-        ],
+            })
+        ]
     },
     plugins: []
 });
diff --git a/webpack/loaders/webpack.image.js b/webpack/loaders/webpack.image.js
@@ -0,0 +1,23 @@
+const config = require('../../webpack.config');
+
+module.exports = ({include, exclude} = {}) => ({
+    module: {
+        rules: [
+            {
+                test: /\.(png|jpe?g|gif|svg)$/,
+                include,
+                exclude,
+                use: [
+                    {
+                        loader: 'file-loader',
+                        options: {
+                            name: '[name].[contenthash].[ext]',
+                            outputPath: 'images/',
+                            publicPath: config.path.publicPathAssets + 'images/'
+                        }
+                    }
+                ]
+            }
+        ]
+    }
+});
diff --git a/webpack/loaders/webpack.js.js → webpack/loaders/webpack.javascript.js b/webpack/loaders/webpack.js.js → webpack/loaders/webpack.javascript.js
diff --git a/webpack/webpack.loaders.js b/webpack/webpack.loaders.js
@@ -1,3 +1,4 @@
-exports.loadJS = require('./loaders/webpack.js');
+exports.loadJS = require('./loaders/webpack.javascript');
 exports.loadESLint = require('./loaders/webpack.eslint');
-exports.loadCSS = require('./loaders/webpack.css');
+exports.loadCSS = require('./loaders/webpack.css');
+exports.loadImage = require('./loaders/webpack.image');
diff --git a/yarn.lock b/yarn.lock
@@ -3434,6 +3434,14 @@ file-entry-cache@^5.0.1:
   dependencies:
     flat-cache "^2.0.1"
 
+file-loader@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-3.0.1.tgz#f8e0ba0b599918b51adfe45d66d1e771ad560faa"
+  integrity sha512-4sNIOXgtH/9WZq4NvlfU3Opn5ynUsqBwSLyM+I7UOwdGigTBYfVVQEwe/msZNX/j4pCJTIM14Fsw66Svo1oVrw==
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^1.0.0"
+
 file-type@5.2.0, file-type@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/file-type/-/file-type-5.2.0.tgz#2ddbea7c73ffe36368dfae49dc338c058c2b8ad6"