docs: publicPath documentation (#187)

* Update README.md

Update README.md to tell user they can specify a custom path in `url`, relative or absolute

* test: add test case for simple

* test: add a new test case for publicpath option

* test: reset the change of simple test case

* Update webpack.config.js

Author: way2ex

README.md

@@ -58,7 +58,14 @@ module.exports = {
       {
         test: /\.css$/,
         use: [
-          MiniCssExtractPlugin.loader,
+          { 
+            MiniCssExtractPlugin.loader,
+            options: {
+              // you can specify a publicPath here
+              // by default it use publicPath in webpackOptions.output
+              publicPath: '../'
+            }
+          },
           "css-loader"
         ]
       }

package.json

@@ -64,6 +64,7 @@
     "eslint": "^4.17.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-prettier": "^2.6.0",
+    "file-loader": "^1.1.11",
     "husky": "^0.14.3",
     "jest": "^22.2.2",
     "lint-staged": "^6.1.0",

test/cases/simple-publicpath/expected/main.css

@@ -0,0 +1,2 @@
+body { background: red; background-image: url(/static/img/cd0bb358c45b584743d8ce4991777c42.svg); }
+

test/cases/simple-publicpath/index.js

@@ -0,0 +1 @@
+import './style.css';

test/cases/simple-publicpath/react.svg

@@ -0,0 +1 @@
+body { background: red; background-image: url(./react.svg); }

test/cases/simple-publicpath/style.css

@@ -0,0 +1,34 @@
+const Self = require('../../../');
+
+module.exports = {
+  entry: './index.js',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: Self.loader,
+            options: {
+              publicPath: '/static/img/'
+            }
+          },
+          'css-loader',
+        ],
+      }, {
+        test: /\.(svg|png)$/,
+        use: [{
+          loader: 'file-loader',
+          options: {
+            filename: '[name].[ext]'
+          }
+        }]
+      }
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+};