feat(index): add cssOutputPath option (option.cssOutputPath)

.eslintcache

@@ -0,0 +1 @@
+{"C:\\Users\\Adrian Miranda\\Sites\\ambox\\github\\adriancmiranda\\file-loader\\src\\cjs.js":{"size":45,"mtime":1496936755980,"hashOfConfig":"16xjw5j","results":{"filePath":"C:\\Users\\Adrian Miranda\\Sites\\ambox\\github\\adriancmiranda\\file-loader\\src\\cjs.js","messages":[],"errorCount":0,"warningCount":0}},"C:\\Users\\Adrian Miranda\\Sites\\ambox\\github\\adriancmiranda\\file-loader\\src\\helper.js":{"size":334,"mtime":1496934738398,"hashOfConfig":"16xjw5j","results":{"filePath":"C:\\Users\\Adrian Miranda\\Sites\\ambox\\github\\adriancmiranda\\file-loader\\src\\helper.js","messages":[],"errorCount":0,"warningCount":0}},"C:\\Users\\Adrian Miranda\\Sites\\ambox\\github\\adriancmiranda\\file-loader\\src\\index.js":{"size":3601,"mtime":1496941794969,"hashOfConfig":"16xjw5j","results":{"filePath":"C:\\Users\\Adrian Miranda\\Sites\\ambox\\github\\adriancmiranda\\file-loader\\src\\index.js","messages":[],"errorCount":0,"warningCount":0}},"C:\\Users\\Adrian Miranda\\Sites\\ambox\\github\\adriancmiranda\\file-loader\\test\\correct-filename.test.js":{"size":8332,"mtime":1496936927390,"hashOfConfig":"16xjw5j","results":{"filePath":"C:\\Users\\Adrian Miranda\\Sites\\ambox\\github\\adriancmiranda\\file-loader\\test\\correct-filename.test.js","messages":[],"errorCount":0,"warningCount":0}},"C:\\Users\\Adrian Miranda\\Sites\\ambox\\github\\adriancmiranda\\file-loader\\test\\optional-file-emission.test.js":{"size":628,"mtime":1496936290558,"hashOfConfig":"16xjw5j","results":{"filePath":"C:\\Users\\Adrian Miranda\\Sites\\ambox\\github\\adriancmiranda\\file-loader\\test\\optional-file-emission.test.js","messages":[],"errorCount":0,"warningCount":0}},"C:\\Users\\Adrian Miranda\\Sites\\ambox\\github\\adriancmiranda\\file-loader\\test\\helper.test.js":{"size":847,"mtime":1496949000783,"hashOfConfig":"16xjw5j","results":{"filePath":"C:\\Users\\Adrian Miranda\\Sites\\ambox\\github\\adriancmiranda\\file-loader\\test\\helper.test.js","messages":[],"errorCount":0,"warningCount":0}}}

.eslintignore

@@ -1,2 +1,2 @@
 /node_modules
-/dist
+/dist

.gitignore

@@ -1,18 +1,28 @@
+# samples
+examples/*/dist/*
+
 # development
-/node_modules
+node_modules/
 /coverage
-
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-.eslintcache
 /dist
 /local
 /reports
-.DS_Store
+logs
+*.log
+*.log*
 Thumbs.db
-.idea
-.vscode
 *.sublime-project
-*.sublime-workspace
+*.sublime-workspace
+
+# dotfiles
+.*
+!.babelrc
+!.editorconfig
+!.eslintcache
+!.eslintignore
+!.eslintrc
+!.gitattributes
+!.gitignore
+!.travis.yml
+*~
+*#*

README.md

@@ -61,6 +61,8 @@ use: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images
 }
 ```
 
+`cssOutputPath` also should be used (together with `useRelativePath` property) to define the output path context.
+
 #### Filename template placeholders
 
 * `[ext]` the extension of the resource

examples/relative-path-with-multiple-css-outputs/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "use-relative-path",
+  "author": "@adriancmiranda",
+  "scripts": {
+    "dev": "webpack-dev-server --open --env.dev",
+    "prebuild": "rimraf dist/",
+    "build": "webpack -p"
+  },
+  "optionalDependencies": {
+    "css-loader": "0.28.0",
+    "extract-text-webpack-plugin": "2.1.0",
+    "html-webpack-plugin": "2.28.0",
+    "ip": "1.1.5",
+    "rimraf": "2.6.1",
+    "style-loader": "0.16.1",
+    "webpack-dev-server": "2.4.2"
+  },
+  "devDependencies": {
+    "webpack": "2.4.1"
+  }
+}

examples/relative-path-with-multiple-css-outputs/source/scripts/desktop.js

@@ -0,0 +1 @@
+console.log('Desktop');

examples/relative-path-with-multiple-css-outputs/source/scripts/mobile.js

@@ -0,0 +1 @@
+console.log('Mobile');

examples/relative-path-with-multiple-css-outputs/source/styles/desktop.css

@@ -0,0 +1,50 @@
+/* Desktop styles */
+*,
+*:after,
+*:before {
+  -webkit-tap-highlight-color: transparent;
+  tap-highlight-color: transparent;
+  box-sizing: border-box;
+  outline-style: none;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  font-family: Helvetica, sans-serif;
+  font-size: 16px;
+  line-height: 10px;
+  margin: 0;
+}
+
+div,
+canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(77, 155, 216);
+}
+
+div {
+  background: rgba(0,0,0,0.2) url("../../../../.github/assets/file_loader_icon.svg") no-repeat 50% 50%;
+}
+
+img {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  display: block;
+}
+
+div:before {
+  position: absolute;
+  display: block;
+  margin-top: 10px;
+  margin-left: 10px;
+  color: #fff;
+  content: "file-loader / examples / relative-path-with-multiple-output / desktop";
+}

examples/relative-path-with-multiple-css-outputs/source/styles/mobile.css

@@ -0,0 +1,50 @@
+/* Desktop styles */
+*,
+*:after,
+*:before {
+  -webkit-tap-highlight-color: transparent;
+  tap-highlight-color: transparent;
+  box-sizing: border-box;
+  outline-style: none;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  font-family: Helvetica, sans-serif;
+  font-size: 16px;
+  line-height: 10px;
+  margin: 0;
+}
+
+div,
+canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(142, 214, 251);
+}
+
+div {
+  background: rgba(0,0,0,0.2) url("../../../../.github/assets/file_loader_icon.svg") no-repeat 50% 50%;
+}
+
+img {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  display: block;
+}
+
+div:before {
+  position: absolute;
+  display: block;
+  margin-top: 10px;
+  margin-left: 10px;
+  color: #fff;
+  content: "file-loader / examples / relative-path-with-multiple-output / mobile";
+}

examples/relative-path-with-multiple-css-outputs/source/views/desktop.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <canvas id="background"></canvas>
+    <div>
+      <img src="${require(`../../../../.github/assets/file_loader_icon.svg`)}" width="30" height="30" alt="">
+    </div>
+  </body>
+</html>

examples/relative-path-with-multiple-css-outputs/source/views/mobile.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <canvas id="background"></canvas>
+    <div>
+      <img src="${require(`../../../../.github/assets/file_loader_icon.svg`)}" width="30" height="30" alt="">
+    </div>
+  </body>
+</html>

examples/relative-path-with-multiple-css-outputs/webpack.config.js

@@ -0,0 +1,109 @@
+const ip = require('ip');
+const path = require('path');
+const Text = require('extract-text-webpack-plugin');
+const Html = require('html-webpack-plugin');
+const webpack = require('webpack');
+const fileLoader = require.resolve('../../src/cjs');
+
+const resolve = (...args) => path.resolve(__dirname, ...args);
+
+const OUTPUT = {
+  bundle: 'dist/',
+  img: 'media/images/',
+  css: 'styles/',
+  js: 'scripts/',
+};
+
+module.exports = (argv = {}) => {
+  const config = {
+    devtool: argv.dev ? '#cheap-module-eval-source-map' : '#source-map',
+    entry: {
+      desktop: ['./source/scripts/desktop.js', './source/styles/desktop.css'],
+      mobile: ['./source/scripts/mobile.js', './source/styles/mobile.css'],
+    },
+    output: {
+      path: resolve(OUTPUT.bundle),
+      filename: `${OUTPUT.js}[name].js`,
+    },
+    devServer: {
+      contentBase: resolve(OUTPUT.bundle),
+      historyApiFallback: true,
+      stats: 'errors-only',
+      host: ip.address(),
+      port: 3000,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: Text.extract({
+            publicPath: argv.dev && OUTPUT.bundle,
+            fallback: 'style-loader',
+            use: [{
+              loader: 'css-loader',
+              query: {
+                minimize: false,
+              },
+            }],
+          }),
+        },
+        {
+          test: /\.(jpe?g|png|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
+          loader: fileLoader,
+          options: {
+            useRelativePath: true,
+
+						/*
+						|* If you need a multiple output path for any reason
+						|* @see https://github.com/webpack-contrib/file-loader/issues/149#issuecomment-294290509
+						`*/
+            cssOutputPath: OUTPUT.css,
+
+            outputPath: OUTPUT.img,
+            name: '[name].[hash:7].[ext]',
+          },
+        },
+      ],
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        'process.env': {
+          NODE_ENV: `'${argv.dev ? 'development' : 'production'}'`,
+        },
+      }),
+      new Text({
+        filename: `${OUTPUT.css}[name]${argv.dev ? '' : '.[chunkhash]'}.css`,
+        disable: !!argv.dev,
+        allChunks: true,
+      }),
+      new Html({
+        title: 'file-loader // useRelativePath // mobile',
+        template: './source/views/mobile.html',
+        filename: 'mobile.html',
+        chunks: ['mobile'],
+      }),
+      new Html({
+        title: 'file-loader // useRelativePath // desktop',
+        template: './source/views/desktop.html',
+        filename: 'index.html',
+        chunks: ['desktop'],
+      }),
+      new webpack.HotModuleReplacementPlugin({ quiet: true }),
+      new webpack.NoEmitOnErrorsPlugin(),
+      new webpack.NamedModulesPlugin(),
+    ],
+  };
+
+  if (argv.dev) {
+    const host = config.devServer.host;
+    const port = config.devServer.port;
+    Object.keys(config.entry).forEach((entry) => {
+      config.entry[entry] = [
+        `webpack-dev-server/client?http://${host}:${port}`,
+        'webpack/hot/only-dev-server',
+      ].concat(config.entry[entry]);
+    });
+  }
+
+  return config;
+};

examples/relative-path-with-single-css-output/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "use-relative-path",
+  "author": "@adriancmiranda",
+  "scripts": {
+    "dev": "webpack-dev-server --open --env.dev",
+    "prebuild": "rimraf dist/",
+    "build": "webpack -p"
+  },
+  "optionalDependencies": {
+    "css-loader": "0.28.0",
+    "extract-text-webpack-plugin": "2.1.0",
+    "html-webpack-plugin": "2.28.0",
+    "rimraf": "2.6.1",
+    "style-loader": "0.16.1",
+    "webpack-dev-server": "2.4.2"
+  },
+  "devDependencies": {
+    "webpack": "2.4.1"
+  }
+}

examples/relative-path-with-single-css-output/source/index.css

@@ -0,0 +1,49 @@
+*,
+*:after,
+*:before {
+  -webkit-tap-highlight-color: transparent;
+  tap-highlight-color: transparent;
+  box-sizing: border-box;
+  outline-style: none;
+}
+
+html,
+body {
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	font-family: Helvetica, sans-serif;
+	font-size: 16px;
+	line-height: 10px;
+	margin: 0;
+}
+
+div,
+canvas {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background-color: purple;
+}
+
+div {
+	background: rgba(0,0,0,0.5) url("../../../.github/assets/file_loader_icon.svg") no-repeat 50% 50%;
+}
+
+img {
+	position: absolute;
+	right: 10px;
+	bottom: 10px;
+	display: block;
+}
+
+div:before {
+	position: absolute;
+	display: block;
+	margin-top: 10px;
+	margin-left: 10px;
+	color: #fff;
+	content: "file-loader / examples / relative-path-with-single-output";
+}