Add webpack 4 (#14)

Add webpack 4 support

Author: jimexist

.travis.yml

@@ -1,10 +1,9 @@
-
 language: node_js
 
 node_js:
-  - 4
-  - 6
-  - 8
+  - "6"
+  - "8"
+  - "10"
 
 install:
   - npm install

package.json

@@ -55,7 +55,7 @@
     "mkdirp": "^0.5.1",
     "prettier-eslint-cli": "^4.7.1",
     "rimraf": "^2.5.4",
-    "webpack": "^2.4.1"
+    "webpack": "^4.16.0"
   },
   "jest": {
     "collectCoverageFrom": [

src/index.js

@@ -44,25 +44,54 @@ const defaultMinimizeConf = {
 	removeStyleLinkTypeAttributes: true,
 };
 
+/**
+ * Retrieves the public path from the loader options, context.options (webpack <4) or context._compilation (webpack 4+).
+ * context._compilation is likely to get removed in a future release, so this whole function should be removed then.
+ * See: https://github.com/peerigon/extract-loader/issues/35
+ *
+ * @deprecated
+ * @param {Object} options - Extract-loader options
+ * @param {Object} context - Webpack loader context
+ * @returns {string}
+ */
+function getPublicPath(options, context) {
+	const property = 'publicPath';
+	if (property in options) {
+		return options[property];
+	}
+	if (
+		context.options &&
+		context.options.output &&
+		property in context.options.output
+	) {
+		return context.options.output[property];
+	}
+	if (
+		context._compilation &&
+		context._compilation.outputOptions &&
+		property in context._compilation.outputOptions
+	) {
+		return context._compilation.outputOptions[property];
+	}
+	return '';
+}
+
 export default function (content) {
 	this.cacheable && this.cacheable();
 
 	const callback = this.async();
-	const {
-		options: { context, output, target },
-		_module = {},
-		resourcePath,
-	} = this;
+	const { context, target, _module = {}, resourcePath } = this;
 
 	const options = getOptions(this) || {};
+
 	const { resource } = _module;
 
 	const hasIssuer = _module.issuer;
 	const issuerContext = (hasIssuer && _module.issuer.context) || context;
 
 	const {
 		root = resolve(context, issuerContext),
-		publicPath = output.publicPath || '',
+		publicPath = getPublicPath(options, this),
 		enforceRelativePath = false,
 		format,
 		transformContent = (content) => {

test/config.js

@@ -6,6 +6,7 @@ export default (options = {}) => {
 	const { target, globalPublicPath = '/', ...wxmlLoaderOptions } = options;
 	return {
 		entry: resolve(__dirname, 'src', 'index.wxml'),
+		mode: 'development',
 		output: {
 			filename: 'index.js',
 			publicPath: globalPublicPath,

test/test.js

@@ -15,6 +15,9 @@ const clear = () => {
 	rimraf.sync(resolve(__dirname, 'dist'));
 };
 
+const target = (target) => (compiler) =>
+	compiler.apply(new webpack.LoaderTargetPlugin(target));
+
 const mkdir = () => {
 	clear();
 };
@@ -33,7 +36,7 @@ const compile = (content, options = {}) => {
 	});
 };
 
-describe('wxml-loader', () => {
+describe('wxml-loader', async () => {
 	beforeEach(mkdir);
 	afterEach(clear);
 
@@ -72,7 +75,7 @@ describe('wxml-loader', () => {
 	test('should Wechat target work', async () => {
 		await compile(
 			'<import src="/fixture.wxml" /><view wx:for="{{items}}">{{item}}</view>',
-			{ target: function Wechat() {} },
+			{ target: target(function Wechat() {}) },
 		);
 		expect(getCompiledRes()).toBe(
 			'<import src="/fixture.wxml" /><view wx:for="{{items}}">{{item}}</view>',
@@ -82,7 +85,7 @@ describe('wxml-loader', () => {
 	test('should Alipay target work', async () => {
 		await compile(
 			'<import src="/fixture.wxml" /><view wx:for="{{items}}">{{item}}</view>',
-			{ target: function Alipay() {} },
+			{ target: target(function Alipay() {}) },
 		);
 		expect(getCompiledRes()).toBe(
 			'<import src="/fixture.axml" /><view a:for="{{items}}">{{item}}</view>',
@@ -91,7 +94,7 @@ describe('wxml-loader', () => {
 
 	test('should transformContent() work', async () => {
 		await compile('<view wx:for="{{items}}"> {{item}} </view>', {
-			target: function Alipay() {},
+			target: target(function Alipay() {}),
 			transformContent: (content) => content.replace(/\bwx:/, '🦄:'),
 		});
 		expect(getCompiledRes()).toBe('<view 🦄:for="{{items}}"> {{item}} </view>');
@@ -100,15 +103,15 @@ describe('wxml-loader', () => {
 	// DEPRECATED
 	test('should format() work', async () => {
 		await compile('<view wx:for="{{items}}"> {{item}} </view>', {
-			target: function Alipay() {},
+			target: target(function Alipay() {}),
 			format: (content) => content.replace(/\bwx:/, '🦄:'),
 		});
 		expect(getCompiledRes()).toBe('<view 🦄:for="{{items}}"> {{item}} </view>');
 	});
 
 	test('should transformUrl() work', async () => {
 		await compile('<import src="/fixture.wxml" />', {
-			target: function Alipay() {},
+			target: target(function Alipay() {}),
 			transformUrl: (url) => url.replace(/fixture/, '🦄'),
 		});
 		expect(getCompiledRes()).toBe('<import src="/🦄.wxml" />');